How to convert dataurl back to image and display on canvas

Question

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>

Maxim Khanov · Accepted Answer · 2019-06-12 09:21:54Z

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.

the actual solution is a combination of both code snippets right?
The actual solution is the insertion of my answer into your code.

Collectives™ on Stack Overflow

How to convert dataurl back to image and display on canvas

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related