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

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

javascript image download html5-canvas

使用Javascript将画布下载到IE中的图像,javascript,image,download,html5-canvas,Javascript,Image,Download,Html5 Canvas,下面的代码将画布转换为图像，并在IE以外的浏览器中下载（我使用的是IE9）。IE代码将在“新建”选项卡中打开数据URL。但是，它不可下载 if(navigator.appName == "Microsoft Internet Explorer") { somehtml1= document.createElement("img"); somehtml1.id="imgid";someht

下面的代码将画布转换为图像，并在IE以外的浏览器中下载（我使用的是IE9）。IE代码将在“新建”选项卡中打开数据URL。但是，它不可下载

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

}

方便快捷：只需打开一个新选项卡，显示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);
    });

$（“#保存”）。单击（函数（）{
var html=“右键单击下面的图像并将图片另存为””；
html+=“”；
var tab=window.open（）；
tab.document.write（html）；
});

[附加解决方案]

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

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

（画布是画布对象，链接是超链接对象）

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>


canvas=document.getElementById（'myCanvas'）；
ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
ctx.rect（5,10,15,20）；
ctx.stroke（）；
函数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=图像；
}
}

谢谢..这真的很有用。嗨，要求是在新选项卡打开后自动推送另存为图像。明白…嗯，这是一个不好的要求。是的。你说得对..但不知为什么他们需要它。好的，我添加了一个脚本链接，可以用来触发画布保存到用户的本地磁盘。你知道为什么IE的图像质量不如Chrome的好吗？

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