生成 div 的图像并另存为

Question

我想创建一个输入按钮 "Save image" :

截屏 div
在用户的计算机上"Save as"询问

我找到了如何使用 html2canvas 创建 dive 的屏幕并在新选项卡中打开它，它完美运行：

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-generated-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

但是有人给我一些提示并帮助我吗？

Answer 1

你看过了吗

http://eligrey.com/demos/FileSaver.js/

看起来它满足了您的需求

Answer 2

你可以这样做：

//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");
        }
    });
}

Answer 3

这是最终代码，如果对你有帮助的话:

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); 
}

Answer 4

这对我来说很好。

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");
    });
}

生成 div 的图像并另存为

Generate an image of a div and Save as

javascript

base64

blob

html2canvas

filesaver.js