我正在尝试创建 3 个 Canvas 。
- 第一个 Canvas 由 image1 组成。
- 第二个 Canvas 由 image2 组成。
- 第三个 Canvas 是我想使用 javascript 从 DataURL() 绘制 image1 的 Canvas 。
但是，我无法绘制它。我是不是做错了什么？
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>
Java 脚本
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 事件:
var image = new Image
image.src = "URL or DataURL"
image.onload = function(){
ctx.drawImage(image)
}
关于javascript - 使用 DataURL 在 Canvas 中绘制图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17259105/