0

I am drawing on canvas, I want to draw on the image and then save the modified new image drawing instead of the old image on the server, how can I do this?

var img = document.getElementById('img');

var canvas = document.getElementById('can');

var dataURL = canvas.toDataURL();  


$.ajax({
     type: "POST", 
     url: "canvas_ajax_upload.php", 
     data: { img: dataURL }      
  }).done(function(msg){ 
     alert(msg); 
  });

In HTML:

<img style="position:absolute;top:10%;left:10%"  width="833" height="602" id="img" src="http:..../Picture3.png"/>

<img style="position:absolute;top:10%;left:10%"  width="833" height="602" id="img" src="<?=$image?>"/>

I want to save both the image and the canvas is drawn.

In this way, I'm only saving what drawn on the canvas.

Daria Pydorenko
  • 1,754
  • 2
  • 18
  • 45
sam
  • 1
  • 1
  • 1
    Possible duplicate of [How to save an HTML5 Canvas as an image on a server?](https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server) – Daria Pydorenko May 17 '18 at 14:22
  • I want to save both the image I'm drawing on and what I draw as one image. – sam May 17 '18 at 14:40
  • Did you try something like this: https://stackoverflow.com/questions/6957034/save-canvas-with-background-image? – Daria Pydorenko May 17 '18 at 14:53

0 Answers0