生成div的图像并另存为

贾加纳语:

我想创建一个输入按钮“保存图像”:

  1. 拍摄div的屏幕截图
  2. 要求在用户计算机上“另存为”

我已经找到了如何使用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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章