我想创建一个输入按钮“保存图像”:
我已经找到了如何使用html2canvas创建潜水屏幕并在新标签中打开它的方法,它可以完美地工作:
function printDiv2(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
}
});
}
但是对于您来说,另存为一部分是困难的一部分……我发现了一些有趣的话题,因为我是JS(和对象)编码的新手,我有点困惑……我想我将必须使用FileSaver.js并创建一个新的Blob,网址为http://eligrey.com/blog/post/saving-generation-files-on-the-client-side/
但是我不知道如何在我的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");
}
});
}
我也尝试通过提取base64生成的URL来执行此操作,但是对于我来说,要理解所有内容太复杂了:http : //bl.ocks.org/nolanlawson/0eac306e4dac2114c752
但是有人给我一些提示并请帮助我吗?
如果可以帮助您,这是最终代码:
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);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句