Question

下面的代码会将canvas转换为图像，并且在IE以外的浏览器中下载（我使用的是IE9）.IE Code在新标签页面中打开DataURL。但是，它无法下载。

     if(navigator.appName == "Microsoft Internet Explorer")
              {
                  somehtml1= document.createElement("img");
                  somehtml1.id="imgid";somehtml1.name="imgname";
                  somehtml1.src=canvas.toDataURL("image/png");
                  document.body.appendChild(somehtml1);

                  window.win = open (somehtml1.src);
                   setTimeout('win.document.execCommand("SaveAs")', 500);
                     }           
              else
                       {
                             somehtml= document.createElement("a");
 somehtml.href = canvas.toDataURL("image/png");
 somehtml.download = "test.png"; 

}

Answer 1

以下是我正在使用的内容 - 不确定我使用的IE需要什么版本。它使用blob for IE和canvas作为其他浏览器的dataURL。在Chrome和IE 11中测试过。

（canvas是canvas对象，link是超链接对象）

           if (canvas.msToBlob) { //for IE
                var blob = canvas.msToBlob();
                window.navigator.msSaveBlob(blob, 'dicomimage.png');
            } else {
                //other browsers
                link.href = canvas.toDataURL();
                link.download = "dicomimage.png";
            }

Answer 2

用户快速而轻松：只需打开一个显示canvas.toDataURL的新选项卡。

今天的用户了解如何右键单击并保存。

尝试按下它们的“另存为”按钮只会在软件中创建另一个潜在的故障点。 [那是我的2美分]。

示例代码：

    $("#save").click(function(){
        var html="<p>Right-click on image below and Save-Picture-As</p>";
        html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
        var tab=window.open();
        tab.document.write(html);
    });

[其他解决方案]

您可以使用FileSaver.js库让用户将画布保存到本地驱动器。

https://github.com/eligrey/FileSaver.js

Answer 3

我能够在2019年使用以下代码在IE，CH，FF中保存画布图像：

<html>
<body>

<canvas id="myCanvas" style="border: 1px solid black">
</canvas>

<input type="button" id="myButton" value="Save Canvas" onclick="saveCanvas()" />

<script>
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.rect(5, 10, 15, 20);
ctx.stroke();

function saveCanvas() {
    if (canvas.msToBlob) { // IE
        blob = canvas.msToBlob();
        window.navigator.msSaveBlob(blob, 'canvas.png');
    } else { // CH, FF
        image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
        window.location.href = image;
    }
}
</script>
</body>
</html>

使用Javascript在IE中将画布下载到Image

3 个答案: