如何将div的内容保存为图像？

Question

基本上,我正在做标题所说的,试图将div的内容保存为图像.

我打算为iPad制作一个小型在线应用程序.

一个必须的功能是具有"保存"按钮,可以将整个网页保存为图像,并将该图像保存到iPad的相机胶卷.我希望保存div的全部内容,而不仅仅是可见区域.

我在网上搜索了一下,但找不到任何关于任何内容的文档.我在HTML5 Canvas上发现了很多东西.这是我放在一起的一些代码:

<script>
function saveimg()
{
    var c = document.getElementById('mycanvas');
    var t = c.getContext('2d');
    window.location.href = image;

    window.open('', document.getElementById('mycanvas').toDataURL());
}
</script>

<div id="mycanvas">
This is just a test<br />
12344<br />
</div>

<button onclick="saveimg()">Save</button>

虽然,我收到此错误:

TypeError: c.getContext is not a function

此应用程序将仅使用HTML,CSS和jQuery(或其他Javascript库)构建.

Answer 1

有几个同样的问题(的1,2).一种方法是使用画布.这是一个有效的解决方案.在这里,您可以看到使用此库的一些实际示例.