Javascript 将 html 转换为图像，并保存？（使用 html2canvas.js）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34091760/
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
Convert the html into image , and save it ?(use html2canvas.js)
提问by user2452153
I have a big problem, please help me ! This is my code :
我有一个大问题，请帮帮我！这是我的代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>
<script type="text/javascript">
$(function() {
$("#show_button").click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
$("<img/>", {
id: "image",
src: canvas.toDataURL("image/png"),
width: '95%',
height: '95%'
}).appendTo($("#show_img").empty());
}
});
});
});
</script>
</head>
<body>
<h1>test</h1>
<button id="show_button">Show Image</button>
//this is a problem
<a href="" download="dl.jpg">download</a>
<div id="show_img"></div>
</body>
</html>If my viewpoint is correct . To save image,the download need the correct file path and file name. And i use the html2canvas.js , convert the target into image . But when i want to save the image , i don't know the correct file path and file name.(Because the image is dynamic file ,not a static file?) How can i get the correct value to save this image? Thank you!
如果我的观点是正确的。要保存图像，下载需要正确的文件路径和文件名。我使用 html2canvas.js ，将目标转换为图像。但是当我想保存图像时，我不知道正确的文件路径和文件名。（因为图像是动态文件，而不是静态文件？）我怎样才能获得正确的值来保存这个图像？谢谢！
回答by Andrew Bone
OK, I've discovered canvas2image.js that does what you need with this function
好的，我发现 canvas2image.js 可以用这个函数完成你所需要的
downloadPNG = function () {
html2canvas(document.body, {
onrendered: function (canvas) {
Canvas2Image.saveAsPNG(canvas);
}
});
}
Here is a fiddle
这是一个小提琴
回答by Srikanth
Use html2canvas it will convert html to canvas and use canvas2image packages to convert canvas to image (or) you can pass canvas data .toDataURL("image/png");
使用 html2canvas 它将 html 转换为画布并使用 canvas2image 包将画布转换为图像（或）您可以传递画布数据 .toDataURL("image/png");
example:
例子：
var imagename = '<YOUR_IMAGE_NAME>';
var link = event.target;
var canvasData = '<YOUR_CANVAS_DATA>'.toDataURL("image/png");
downloadImageFormat(link, canvasData, imagename);
function downloadImageFormat(link, canvasData, imagename) {
link.href = canvasData;
link.download = imagename;
}
Here is fiddle demo
这是小提琴演示
回答by Code Spy
Just Use html2canvaslibraryjust include plugin and call method to convert HTML to Canvas then download as image PNG
只需使用html2canvas库只需包含插件和调用方法将 HTML 转换为 Canvas 然后下载为图像 PNG
html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
var link = document.createElement("a");
document.body.appendChild(link);
link.download = "manpower_efficiency.jpg";
link.href = canvas.toDataURL();
link.target = '_blank';
link.click();
});
Source: http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
来源：http: //www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
