使用Javascript将画布下载到IE中的图像

Question

Below code will convert canvas to image and the same is downloaded in browsers other than IE(I'm using IE9).IE Code opens theDataURL in new tab.But,it is not downloadable. 下面的代码将画布转换为图像，并在IE（我正在使用IE9）以外的浏览器中下载该图像。IE代码在新选项卡中打开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

Here's what I'm using - not sure what version of IE this requires as I'm using 11. It uses a blob for IE and canvas as a dataURL for other browsers. 这就是我正在使用的-不确定我正在使用11时需要哪个版本的IE。它使用IE的blob和画布作为其他浏览器的dataURL。 Tested in Chrome and IE 11. 已在Chrome和IE 11中测试。

(canvas is the canvas object, link is an hyperlink object) （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

Fast and Easy for Users: Just open up a new tab displaying the canvas.toDataURL. 对用户而言快速简便：只需打开一个新的标签即可显示canvas.toDataURL。

Users today are knowledgeable about how to right-click and save. 今天的用户对如何右键单击和保存非常了解。

Trying to push the save-as button for them just creates another potential failure-point in your software. 尝试为他们按下“另存为”按钮只会在软件中创建另一个潜在的故障点。 [That's my 2-cents]. [这是我的2美分]。

Example code: 示例代码：

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

[ Additional solution ] [其他解决方案]

You can use the FileSaver.js library to let the user save the canvas to their local drive. 您可以使用FileSaver.js库让用户将画布保存到其本地驱动器。

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

Answer 3

I was able to save canvas image in IE, CH, FF with the following code in 2019: 我能够在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中的图像

问题描述

3 个解决方案

解决方案1
31 2015-03-02 21:18:19

解决方案2
6 2014-02-18 22:11:45

解决方案3
0 2019-01-18 09:10:54

使用Javascript将画布下载到IE中的图像

问题描述

3 个解决方案

解决方案1 31 2015-03-02 21:18:19

解决方案2 6 2014-02-18 22:11:45

解决方案3 0 2019-01-18 09:10:54

解决方案1
31 2015-03-02 21:18:19

解决方案2
6 2014-02-18 22:11:45

解决方案3
0 2019-01-18 09:10:54