jQuery 如何将div的内容保存为图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18581379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save the contents of a div as a image?
提问by Fizzix
Basically, I am doing what the heading states, attempting to save the contents of a div as an image.
基本上，我正在做标题所说的，试图将 div 的内容保存为图像。
I plan on making a small online application for the iPad.
我计划为 iPad 制作一个小型在线应用程序。
One function that is a must is having a 'Save' button that can save the full webpage as an image, and save that image to the iPad's camera roll. I wish to save the full contents of a div, not just the visible area.
一个必须的功能是有一个“保存”按钮，可以将整个网页保存为图像，并将该图像保存到 iPad 的相机胶卷中。我希望保存 div 的全部内容，而不仅仅是可见区域。
I have searched briefly online, but couldn't find much documentation on anything. I found a lot on HTML5 Canvas. Here is some code I put together:
我在网上进行了简短的搜索，但找不到任何关于任何内容的文档。我在 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>
Although, I am getting this error:
虽然，我收到此错误：
TypeError: c.getContext is not a function
This application will be built only with HTML, CSS and jQuery (or other Javascript libraries).
此应用程序将仅使用 HTML、CSS 和 jQuery（或其他 Javascript 库）构建。
采纳答案by Glen Swift
There are several of this same question (1, 2). One way of doing it is using canvas. Here's a working solution. Hereyou can see some working examples of using this library.
有几个相同的问题（1, 2）。一种方法是使用画布。这是一个有效的解决方案。在这里你可以看到一些使用这个库的工作示例。
回答by Imadeous
Do something like this:
做这样的事情：
A <div>with ID of #imageDIV, another one with ID #downloadand a hidden <div>with ID #previewImage.
阿<div>与ID的#imageDIV，另一个带ID#download和一个隐藏的<div>与ID #previewImage。
Include the latest version of jquery, and jspdf.debug.js from the jspdf CDN
包括最新版本的 jquery 和来自jspdf CDN 的 jspdf.debug.js
Then add this script:
然后添加这个脚本：
var element = $("#imageDIV"); // global variable
var getCanvas; // global variable
$('document').ready(function(){
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#download").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#download").attr("download", "image.png").attr("href", newData);
});
The div will be saved as a PNG on clicking the #download
div 将在单击时保存为 PNG #download
