生成一个div的图像并保存

Question

我想创建一个名为“保存图片”的输入按钮，它可以：

1. 截取一个div的屏幕截图
2. 要求用户将其“另存为”到计算机中

我已经找到了如何使用html2canvas创建一个div的截图，并在新标签页中打开它，它运行得很完美。

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
      }
    });
}

然而对于你来说，“Save as”部分是比较难的一部分...我发现一些有趣的话题，因为我在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

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

- Jaggana

---

你是怎么截图的？如果有代码，请提供。 - Piyush

答案在下面 :-) - Jaggana

https://stackoverflow.com/questions/45035486/local-storage-bug-in-react-js - Piyush

如果您正在使用最新版本的库，则语法已更改。 - Amit Kumar Gupta

你可以使用 canvas.toBlob(): https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob - Aral Roca

Answer 1

你可以采用这种方法：

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

- Paweł Głowacz

---

太棒了！！只需要在link.href = uri;后面添加document.body.appendChild(link);就可以了，非常简单易懂，谢谢。 - Jaggana

谢谢！似乎从2017年5月开始，后渲染语法已经发生了变化..现在是html2canvas(div).then(function(canvas) {...}); 参考：https://html2canvas.hertzen.com/getting-started - Nikhil VJ

html2canvas未定义。 - JRichardsz

Answer 2

这是最终的代码，如果有帮助的话：

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

- Jaggana

---

在Chrome中工作正常，但在IE 11中不起作用。 - codemirror

你能否分享完整的代码或者再解释一下？我还没有完全理解它是如何工作的，而我正试图达到同样的目的。 - Javier Olayo

Answer 3

这对我来说很好用。

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

- Leandro Costa

Answer 4

你看过吗？

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

看起来它可以满足你的需求。

- Matt Bryson

---

谢谢，但我已经去过那里了，所以我知道我必须使用Filesaver.js，在这个页面上，他们正在使用canvas，但我无法将我的div放入<canvas>标签中。 - Jaggana

Answer 5

现在html2canvas已经改为JavaScript Promise。因此，更新后的代码应该是：

function PrintDiv(div)
{
    html2canvas(div).then(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); 
}

- iganja