使用 DataURL 在 Canvas 中绘制图像答案

【问题标题】：Drawing Image in Canvas using DataURL使用 DataURL 在 Canvas 中绘制图像
【发布时间】：2013-06-19 23:50:43
【问题描述】：

我正在尝试创建 3 个画布。

第一个画布由 image1 组成。
第二个画布由 image2 组成。
第三个画布是我想使用 javascript 从 DataURL() 中绘制 image1 的画布。

但是，我无法绘制它。是不是我做错了什么？

HTML 代码

<body>
<img id="image1" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
<canvas id="myCanvas"></canvas>

<img id="image2" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">
<canvas id="myCanvas2"></canvas>


<canvas id="myCanvas3"></canvas>

</body>

JavaScript

var c = document.getElementById("myCanvas");
var a = c.toDataURL();
alert(a);

var myCanvas = document.getElementById('myCanvas3');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.src = a;
ctx.drawImage(img, 20, 20);

【问题讨论】：

你试过onload方法了吗？ img.onload = function(){ ctx.drawImage(img, 20, 20); }; 在img.src=a; 之后
@mohkhan 是的，我试过了，但还是失败了。看一下这个。 jsfiddle.net/khongming/ZQ5Z3 警报显示 dataURL() 正在工作。
如何将任何图像数据放入myCanvas 第一个画布？
为什么不直接使用 ctx.drawImage(c,20,30) 而不是使用慢速 dataURL() 过程？
@VeXii 从这里var c = document.getElementById("myCanvas"); var a = c.toDataURL(); 我从myCanvas 得到DataURL。我实验的全部目的是从DataURL 中绘制图像

标签： javascript html image canvas src

【解决方案1】：

你错过了图片的onload事件：

var image = new Image
image.src = "URL or DataURL"
image.onload = function(){
   ctx.drawImage(image)
}

working fiddle

【讨论】：

谢谢，。我只是注意到我没有使用 image.onload()。但是，我正在使用 DataURL 作为源进行绘图，但它不起作用，您正在演示使用 websource 进行绘图。
它适用于 DataURL，只要确保你的 canvas1 是空的 Check this updated Fiddle
不确定为什么这不是公认的答案（将 src 作为最后一行以确保 100% 安全）。来自我的 +1。

【解决方案2】：

第一个画布是空的，这就是为什么在第三个画布上什么都没有绘制。先做这个。

var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.src = "http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG";
ctx.drawImage(img, 20, 20);

您必须在画布上绘制图像。只是在 canvas 标签之前有一个 img 标签不会在你的 canvas 元素上绘制图像。

【讨论】：

这可能会失败。设置 src 后不要立即绘制，而是使用图像上的 onload 事件来确保图像实际上已完全加载。