如何将DIV内容发送到html5 CANVAS

时间:2011-10-04 20:24:31

标签: jquery html css html5 canvas

是否可以将div的内容“绘制”到画布...我已经使用css完成了div操作,但是需要画布使用.dataToURL函数将内容“保存”为jpg

所以问题是......你知道一个HTML,CSS,jQuery函数,它传输div的内容并将其绘制到画布

提前致谢

2 个答案:

答案 0 :(得分:3)

<canvas>并不直接支持在其上放置HTML内容,因为将此内容与<IFRAME>相结合可能会导致私人信息丢失。

您可以做的是动态创建SVG图像,然后在<canvas>上绘制它。 SVG比<canvas>更好地支持富文本格式。

用于动态SVG创建的jQuery库:

http://keith-wood.name/svg.html

(参见文字示例)

答案 1 :(得分:1)

查看html2Canvas,它需要一个dom元素并将其转换为画布,然后您可以将该画布绘制到另一个画布上,如下所示:

http://html2canvas.hertzen.com/

var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
    onrendered: function (domElementCanvas) {
        var canvas = document.createElement('canvas');
        canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);

        // do something with canvas
    }
}