生成 div 的图像并另存为

Posted 2023-03-05

【中文标题】生成 div 的图像并另存为

【英文标题】：Generate an image of a div and Save as

【发布时间】：2016-02-13 14:38:29

【问题描述】：

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

截取 div 的屏幕截图 要求在用户计算机上“另存为”

我找到了如何使用 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-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 来解决这个问题，但它对我来说太复杂了，无法理解everyting： http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

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

【问题讨论】：

你是怎么截屏的？如果您有代码，请提供代码

答案如下：-)

***.com/questions/45035486/…

如果您使用的是最新版本的库，则语法已更改。

【参考方案1】：

你看过了吗

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

看起来它可以满足您的需求

【讨论】：

谢谢，但我已经继续了，这就是为什么我知道我必须使用 Filesaver.js，在这个页面上，他们使用的是画布，但我不能将我的 div 放入 标签

【参考方案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");
        
    );

【讨论】：

是的！只需在link.href = uri; 之后添加document.body.appendChild(link); 即可！非常简单，谢谢。

谢谢！似乎从 17 年 5 月开始，渲染后的语法已经发生了变化。现在是 html2canvas(div).then(function(canvas) ...); ref: html2canvas.hertzen.com/getting-started

【参考方案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); 

【讨论】：

在 chrome 中工作但不在 IE 11 中

您能否分享完整的代码或多解释一下我不完全理解它是如何工作的，我正在努力实现同样的目标

【参考方案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");
    );