Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi, I have an image in canvas, user can paint the image and once user submit the form that image path should be saved in database and image somewhere in storage so that we can get new painted image . However i got blank image saved in storage
for this I have made one hidden input field within form. so when user start drawing this need to be in hidden field so that i can submit it later. I have also document.getElementById('my_hidden').value = canvas.toDataURL('image/png'); line of code but I am not sure whether it will store recent drawn image .I am looking for a help on how to save this image easily so it can be displayed easily later.
controller:
$image = request()->my_image; // your base64 encoded
$image = str_replace('data:image/png;base64,', '', $image);
$image = str_replace(' ', '+', $image);
$imageName = str_random(10).'.'.'png';
\File::put(storage_path(). '/' . $imageName, base64_decode($image));
This is my form and I have canvas here.
<body onload="init()">
<form action="{{route('savimg)}}" method="post">@csrf
<canvas id="can" width="1200" height="400"
style="position:absolute;top:10%;left:10%;border:2px solid;">
</canvas>
<input type="hidden" name="my_image" id="my_hidden" value=""> // save newly drawn image here
</body>
</form>
my js part
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "red",
y = 2;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
//here iam putting in hidden field
document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
base_image = new Image();
base_image.src = document.getElementById("editable_image_path").src
base_image.onload = function(){
ctx.drawImage(base_image, 0, 0,800,400);
};
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Want to clear");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
}
function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.getBoundingClientRect().left;
currY = e.clientY - canvas.getBoundingClientRect().top;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.getBoundingClientRect().left;
currY = e.clientY -canvas.getBoundingClientRect().top;
draw();
}
}
}
Any help? Thanks
Do you want to store the base64 so that they can edit the picture again, or just store it as an image so that it can be later rendered to a web page?
Some ideas here https://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image
On the server side, you can use Intervention image to convert the base64 into an image.
hi @snapey , thanks. The goal is to display the picture on webpage/view file later,first user draw and submit the form. Later I should able to see new drew picture submitted by user.
Please or to participate in this conversation.