Javascript 生成一个div的图像并另存为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33668608/
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
Generate an image of a div and Save as
提问by Jaggana
I'd like to create an input button "Save image" that :
我想创建一个输入按钮“保存图像”：
- take a screen shot of a div
- ask to "Save as" on the user's computer
- 截取一个 div 的屏幕截图
- 要求在用户的计算机上“另存为”
I've found how to create a screen of a dive using html2canvas and to open it in a new tab, it works perfectly :
我找到了如何使用 html2canvas 创建潜水屏幕并在新选项卡中打开它，它完美地工作：
function printDiv2(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
}
});
}
But for thee Save as part, is a kind of the tough part... I've found interesting topics, as I'm new in JS (and object) coding, I'm a little bit confused... I think I'll have to use the FileSaver.js and to create a new blob http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/
但是对于你来说，作为一部分，是一种艰难的部分......我发现了有趣的话题，因为我是 JS（和对象）编码的新手，我有点困惑......我想我'必须使用 FileSaver.js 并创建一个新的 blob http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/
But I don't get how to implement the saveAs in my html2canvas, how to cast properly a new blob...
但我不知道如何在我的 html2canvas 中实现 saveAs，如何正确投射一个新的 blob ......
function printDiv2(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
var blob = new Blob(img, {type: "image/jpeg"});
var filesaver = saveAs(blob, "my image.png");
}
});
}
Also I tried to do something with this, by extracting the base64 generated URL, but it's too complicated for me to understand everyting : http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752
我还尝试通过提取 base64 生成的 URL 来对此做一些事情，但它太复杂了，我无法理解：http: //bl.ocks.org/nolanlawson/0eac306e4dac2114c752
But someone give me a few tips and help me please ?
但是有人给我一些提示并帮助我好吗？
采纳答案by Jaggana
Here is the final code, if it can helps you :
这是最终代码，如果它可以帮助您：
function PrintDiv(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var myImage = canvas.toDataURL();
downloadURI(myImage, "MaSimulation.png");
}
});
}
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
//after creating link you should delete dynamic link
//clearDynamicLink(link);
}
回答by Pawe? G?owacz
You could do this approach:
你可以这样做：
//Creating dynamic link that automatically click
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
//after creating link you should delete dynamic link
//clearDynamicLink(link);
}
//Your modified code.
function printToFile(div) {
html2canvas(div, {
onrendered: function (canvas) {
var myImage = canvas.toDataURL("image/png");
//create your own dialog with warning before saving file
//beforeDownloadReadMessage();
//Then download file
downloadURI("data:" + myImage, "yourImage.png");
}
});
}
回答by Leandro Costa
This works fine for me.
这对我来说很好用。
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
clearDynamicLink(link);
}
function DownloadAsImage() {
var element = $("#table-card")[0];
html2canvas(element).then(function (canvas) {
var myImage = canvas.toDataURL();
downloadURI(myImage, "cartao-virtual.png");
});
}
回答by Matt Bryson
Have you looked at
你看过吗
http://eligrey.com/demos/FileSaver.js/
http://eligrey.com/demos/FileSaver.js/
Looks like it does what you need
看起来它可以满足您的需求
