浅析浏览器中的图片下载

由于项目需求的原因，认真查阅了浏览器中图片下载的有关资料，总结了几个部分。

1. SVG另存为PNG格式

 在IE中，貌似只能通过鼠标右键点击SVG来把SVG另存为PNG保存到本地。
 在非IE浏览器中，则可以通过以下代码来实现：

    let serializer = new XMLSerializer(),
    //把一个 XML 文档或 Node 对象转化或“序列化”为未解析的 XML 标记的一个字符串
        source = serializer.serializeToString(svg.node());
        //把svg转换为一个字符串
    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
    var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
    //把SVG变成了data数据流
    let canvas = document.createElement("canvas");//创建一个canvas标签
    canvas.width = width;
    canvas.height = height;
    let context = canvas.getContext("2d");//在画布上二维绘图
    let image = new Image();//创建一个新的image标签
    image.src = url;
    image.onload = function () {
      context.drawImage(image, 0, 0);//在canvas中画出image
      var a = document.createElement("a");
      a.download = "svg.png";//这是图片的名字，a.download属性不被IE支持
      a.href = canvas.toDataURL();//把canvas的数据转换成base64编码
      a.click();
    };

也可以利用canvg.js（把SVG转换成canvas）这个插件来实现，代码如下：

//记得引入canvg.js文件或者npm下载下来
let canvas = document.createElement("canvas");
canvas.width = 720;//这个根据你的实际需求来
canvas.height = 720;
canvg(canvas,svgHTML);//canvg.js里面的函数，作用是把svg变成canvas
//canvas是你要存放canvas的容器我这里用的就是一个canvas标签，svgHTML是你要转换的SVG这个标签
var a = document.createElement("a");
a.download = "svg.png";
 a.href = canvas.toDataURL();//canvas.toDataURL()在IE中会报安全错误，应该是因为跨域的问题
 a.click();

2. canvas另存为PNG图片

if(!!window.ActiveXObject || "ActiveXObject" in window){
// IE浏览器;
　　let blob = canvas.msToBlob();
　　//canvas是你页面中的要另存为PNG图片的canvas标签，.msToBlob()是IE浏览器的行为，原本是canvas.toBlob()。
    window.navigator.msSaveBlob(blob, 'svg.png');
    //这个则是IE的Blob数据的存储方法
  }else{
// 非IE浏览器;
      var a = document.createElement("a");
      a.download = "svg.png";
      a.href = canvas.toDataURL();
      a.click();
  }