Question

我正在尝试创建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>

Javescript

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);

Answer 1

您错过了图片的onload事件：

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

working fiddle

Answer 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标记不会在canvas元素上绘制图像之前使用img标记。

使用DataURL在画布中绘制图像

2 个答案: