Edge浏览器Javascript下载服务器图片方式
2017-09-11 本文已影响0人
跬步之行
最近在维护公司web的时候遇到了一个bug——IE11下点击下载图片按钮没有作用（最讨厌IE的兼容性问题有木有。。。），于是开始着手解决。
因为本人的IE11一直是保持更新的，所以很早就发现了这个东西：
TLPic_20170911192041.png
这里的文档模式可以选择这几种类型，以前也没有仔细研究这里的文档模式具体代表什么，只当是可以模拟各版本的IE浏览器来进行调试的选项，最近仔细研究了一下，这个选项应该是代表了你选择了什么版本的渲染引擎（Edge使用EdgeHTML，其他是Trident渲染引擎，版本不同）和JS解释引擎（Edge使用的Chakra for javascript，其他是Chakra for JScript）。最近遇到到这个bug可能就是因为原来的方法在JS解释引擎下失效导致的。
现在来解决问题
第一步，Microsoft Edge 下如何下载文件？查阅官方文档得到示例
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<h1>Download a blob</h1>
<script>
var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);
window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');
</script>
</body>
</html>
第二步，如何得到一个代表图片数据的blob对象？
var pngImageBlob = Canvas.msToBlob();
第三步，如何得到一个包含所需图片的canvas对象?
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<img id = "myImg" src = "theImageThatINeed.png" />
<canvas id = "myCanvas"></canvas>
<script>
var img = document.getElementById("myImg");
var canvas = document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
// Then I get the 'canvas' that represent the image and I can download it
</script>
</body>
</html>
最后，汇总代码
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<title>Download From Edge</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<input type="button" name="download" value="download" onclick="download()">
<script type="text/javascript">
var img = document.getElementById("myImg");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
function download() {
window.navigator.msSaveBlob(canvas.msToBlob(), "myimage.png");
}
</script>
</body>
</html>
