一个div的画布drawImage答案

【问题标题】：canvas drawImage of a div一个div的画布drawImage
【发布时间】：2012-07-17 21:28:44
【问题描述】：

我正在尝试在画布上绘制图像。我的来源是一个包含文本和图像集合的 div。这可能吗？我试图将一些代码放在一起，但由于画布为空而失败。

分区

<div id="puzzle">
Some text
<img src="sky" />
text text
<img src="sun.png />
</div>

代码

<canvas id="mycanvas" width="300" height="150"></canvas>
var canvas = document.getElementById("mycanvas");
var ctx = ccanvas.getContext("2d");
var img = document.getElementById("puzzle");
img.onload = function(){
    ctx.drawImage(img,0,0,40,40);
}

【问题讨论】：

@Alex W 这是在 chrome 扩展中使用的，所以我使用的是 javascript 文件
img = document.getElementById("puzzle"); "puzzle" 是 <div> 元素，而不是图像。我想这会对你有所帮助：developer.mozilla.org/en/Canvas_tutorial/Using_images

标签： javascript html html5-canvas

【解决方案1】：

在img标签内写id=puzzle

【讨论】：

这将使用id 和puzzle 组成两个元素。 ids are restricted to one element.

【解决方案2】：

改变

ccanvas.getContext("2d");

到

canvas.getContext("2d");

否则，这似乎就是您要查找的内容：Can you take a "screenshot" of the page using Canvas?

更具体地说：http://html2canvas.hertzen.com/

【讨论】：