javascript 使用Javascript在IE中将画布下载到图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21860633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Download canvas to Image in IE using Javascript
提问by Kavitha Kesavan
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";
}
回答by Aerik
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. Tested in Chrome and IE 11.
这是我正在使用的 - 不确定这需要什么版本的 IE，因为我使用的是 11。它使用 IE 的 blob 和画布作为其他浏览器的 dataURL。在 Chrome 和 IE 11 中测试。
(canvas is the canvas object, link is an hyperlink object)
（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";
}
回答by markE
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 库让用户将画布保存到他们的本地驱动器。
回答by user3719454
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>
