javascript - 如何将 dataurl 转换回图像并在画布上显示
问题描述
我有 3 张画布。我从 canvas1 裁剪一个区域并将其显示在 canvas 2 上。然后我想将 canvas 2 图像转换为 URL 并查看是否可以将该 URL 转换回图像。我希望它显示在画布 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>
解决方案
您的解决方案不起作用的原因是您没有等待onload
事件。在onload
事件之前,图像不会呈现。
将画布转换为数据 URL 很简单,使用.toDataURL();
canvas 元素的方法。
然后要将数据 URL 转换回画布图像,您首先必须创建一个 Image 元素并将其源设置为 dataURL。获取图像onload
事件后,您可以将图像绘制到画布上。这可以如图所示完成:
假设数据 URL 位于名为 dataURL 的变量中,则画布上下文位于名为 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:您不必通过指定宽度和高度来缩放图像对象,当您指定目标宽度和高度时,画布会这样做。
推荐阅读
- javascript - 如何在反应js中显示消息
- ios - 使用 3G 互联网连接时,Crashlytics 不会为事件上传提供互联网连接错误
- c++ - delete[] 具有不同类型的未定义行为?
- android - 当我单击由 React Native 创建的文本框时,模拟器关闭
- visual-c++ - 如何将“双”转换为“变体”
- c# - 自我更新 Asp.Net-Core Windows 服务阻塞端口
- python - 获取供应位置的递归函数
- windows - 如何在 Windows 上安装 OpenJDK 11?
- java - Maven 跳过 -Dtest 中指定的测试
- time - praat 脚本获取某个单词的音高列表