logo标签列表

使用DataURL在Canvas中绘制图像

javascripthtmlimagecanvassrc
4

我正在尝试创建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);
你怎样将任何图像数据载入到 myCanvas 这个画布中？ - VeXii
2
为什么不直接使用ctx.drawImage(c,20,30)而不是使用缓慢的dataURL()过程呢？ - dandavis
@KhongMingKok 我能看到你的问题。但是你正在从一个空画布中提取DataURL，所以你只会看到白色。如果你想要看到一个正确的图片或者数据URL，我已经留下了相关示例。 - VeXii
抱歉，如果我无法理解。 我正在从“myCanvas”中提取“DataURL”，为了确保，我记录并在警报中显示变量a。DataURL在那里，所以它不应该是空的，对吧？ - KhongMing Kok
@KhongMingKok 你弹出的DataURL是一个空（即全部透明）图片的数据。 - VeXii
显示剩余5条评论
2个回答
8

您缺少图像的onload事件：

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

工作的代码示例

谢谢，我刚刚注意到我没有使用image.onload()。 然而，我正在绘制使用DataURL作为源，但它不起作用，你正在演示使用Web源进行绘制。 - KhongMing Kok
它可以很好地处理DataURL，只需确保canvas1不为空。请查看此更新的Fiddle。 - VeXii
1
不确定为什么这不是被接受的答案（将src作为最后一行以确保100％安全）。我给你点赞。 - user1693593
1
第一个画布是空的，这就是为什么第三个画布上没有绘制任何内容的原因。首先要做的就是填充第一个画布。
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标签是不能将图片绘制到画布元素上的。
1
这可能会失败。不要在设置src后立即绘制，而是使用图像的onload事件确保图像实际上已经完全加载。 - user1693593
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接