javascript - 如何将 dataurl 转换回图像并显示在 Canvas 上

Question

我有 3 张 Canvas 。我从 canvas1 裁剪一个区域并将其显示在 Canvas 2 上。然后我想将 canvas 2 图像转换为 URL，并查看是否可以将该 URL 转换回图像。我希望它显示在 Canvas c4 中。如有任何帮助，我们将不胜感激。

// 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>

Answer 1

您的解决方案不起作用的原因是您没有等待 onload 事件。在 onload 事件之前，图像将不会渲染。

要将 Canvas 转换为数据 URL 很简单，请使用 canvas 元素的 .toDataURL(); 方法。

然后，要将数据 URL 转换回 Canvas 图像，您首先必须创建一个 Image 元素并将其源设置为 dataURL。获取图像 onload 事件后，您可以将图像绘制到 Canvas 上。这可以如下完成:

假设数据 URL 位于名为 dataURL 的变量中， Canvas 上下文位于名为 ctx 的变量中。

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

最终的解决方案如下:

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

PS:您不必通过指定宽度和高度来缩放图像对象， Canvas 会在您指定目标宽度和高度时执行此操作。