CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Mia Davis
Mia Davis

Reputation: 131

How to convert dataurl back to image and display on canvas

I have 3 canvases. I crop a region from canvas1 and display it on canvas 2 . Then I want to convert canvas 2 image to a URL and to see if can convert that URL back to a image. I want it to be displayed in canvas c4.Any help is appreciated.

// image is drawn here , I want this image to be converted to a dataURL 
//then back to image and display it in canvas c4
var c2 =  document.getElementById("area_c2");

 var ctx = c.getContext("2d");
 var ctx2 = c2.getContext("2d");
 image_src.width = c2.width;
 image_src.height = c2.height;

ctx2.drawImage(image_src, 0, 0,image_src.width, image_src.height);




 var c4 =  document.getElementById("area_c4");
 var ctx4 = c4.getContext("2d");

 var dataURL = c2.toDataURL();

 var myImg = new Image;

 myImg.src = dataURL;

 myImg.width = c4.width;
 myImg.height = c4.height;

 ctx4.drawImage(myImg, 0, 0, image_src.width, image_src.height); //Image //is not displayed here , I want the image to take the size of the canvas


  <canvas  id ="area_c2" style="width:300px;height:300px;border:3px solid 
  black;z-index:1"  >
  </canvas>


 <canvas id ="area_c4" style="width:300px;height:300px;border:3px solid 
   black;z-index:1;background:red">
 </canvas>

Upvotes: 2

Views: 3259

Answers (1)

Maxim Khanov
Maxim Khanov

Reputation: 434

The reason your solution did not work is because you did not wait for the onload event. Before the onload event the image will not render.

To convert a canvas to a data URL is simple, use the .toDataURL(); method of the canvas element.

Then to convert the data URL back to an canvas image, you would first have to create an Image element and set its source as the dataURL. After getting the image onload event you can draw the image onto the canvas. This could be accomplished as shown:

Assuming the data URL is in a variable called dataURL, the canvas context is in a variable called ctx.

var img = new Image;
img.onload = () => { ctx.drawImage(img, 0, 0); };
img.src = dataURL;

The final solution would go like this:

var cdata2 = c2.toDataURL();
var cimg2 = new Image;
cimg2.onload = () => { ctx4.drawImage(cimg2, 0, 0, c4.width, c4.height); };

PS: You don't have to scale the image object by specifying the width and height, the canvas will do that when you specify the destination width and height.

Upvotes: 2

Related Questions