一行代码解决svg保存成png文件

先说下我的功能需求，大家看看和大家的是否相同，能否借鉴。
下面是我的整个的思路过程，如果想直接找解决方案，直接看方案三。

功能需求：

添加一个按钮，点击按钮时，将拓扑图保存为图片文件并导出。

就是将在svg画布上画的图，保存成图片并导出。

问题描述：

在svg画布上画的拓扑图，每个节点使用的是图片，将整个svg导出时，导出的图片文件上面不显示节点图片。如图1-1、1-2：

图1-1 svg画布画好的拓扑图

图1-2 导出的图片

我svg中绘制过程中，引入图片的代码如图1-3：

图1-3 svg节点引入图片

图片放在static下面，如图1-4：

图1-4 引入的图片存放位置

方案思路：

方案一：无须引入插件

首先是制造一个button，用的element的框架。
导出图片

然后写这个点击事件响应函数：

saveSvgToPng: function () {
        //采用直接转成canvas的方式
        let width = 1000;
        let height = 666;
        var serializer = new XMLSerializer();
        var source = '\r\n'+serializer.serializeToString(svg.node());
        var image = new Image();
        image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        var context = canvas.getContext("2d")
        image.onload = function(){
          context.drawImage(image, 0, 0);

          var a = document.createElement("a");
          a.download = "aaaa.png";
          a.href = canvas.toDataURL('image/png');
          a.click();
        }
      },

导出内容如图1-2，未显示网元节点图片。未搞清楚原因，查了一些资料，好像是因为canvas画布被污染了，所以无法使用toDataURL这种方法了。而canvas画布被污染的原因好像是因为svg中网元节点图片跨域了，我现在有这个疑问：在static下面的图片，存在跨域问题吗，因为我导出的时候，并没有报出跨域的错误。

然后我又尝试了方案二：

方案二：使用插件html2canvas

按照官网步骤，引入html2canvas插件，修改html结构，将svg放入一个div内，并给div一个ref标签，便于引用，如图1-5.

图1-5 html结构

然后修改点击响应函数，代码如下：

函数1：

dataURLToBlob: function (dataurl) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime})
},

单击响应函数2：

catchSvgToPng: function () {
        const _this = this
        let a = document.createElement('a');
        setTimeout(() => {
          // 此处用于解决截图不清晰问题，将生成的canvas放大，然后再填充到原有的容器中就会清晰
          const width = 1000;
          const height = 400;
          const canvas2 = document.createElement('canvas');
          const scale = 2;
          canvas2.width = width * scale;
          canvas2.height = height * scale;
          const context1 = canvas2.getContext('2d')
          if(context1) {
            context1.scale(scale, scale);
          }
          const opts = {
            scale,
            canvas: canvas2,
            // logging: true, //日志开关，便于查看html2canvas的内部执行流程
            width,
            height,
            // 【重要】开启跨域配置
            useCORS: true
          };
          html2canvas(_this.$refs.imageWrapper,opts).then((canvas) => {
            const context = canvas2.getContext('2d');
            if(context) {
              context.scale(2,2);
              context.mozImageSmoothingEnabled = false;
              context.webkitImageSmoothingEnabled = false;
              context.imageSmoothingEnabled = false;
            }
            // canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
//            _this.screenUrl = canvas.toDataURL()

//            var imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64
//            imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传
            let blob = _this.dataURLToBlob(canvas.toDataURL('image/jpeg', 1.0));
            a.setAttribute("href", URL.createObjectURL(blob));
            a.setAttribute("download", "xxxxxx.png");
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(blob);
            document.body.removeChild(a);
          });
        },1000)
      },

导出的图片如图1-6所示：

图1-6 html2canvas导出的图片

导出的图片依然无网元节点图片，已经按照网上查到的资料，对污染的canvas进行处理，不让canvas被污染，依然没有效果。现在不清楚是什么原因导致的导出的图片无节点图片，因此也不知如何解决。
这个问题到这里已经困扰了我将近一周之久，查了好多资料，试了又试，像一支无头苍蝇一样撞来撞去，毫无头绪。因为之前科学上网的软件到期了，一直没有续费，所以之前的查资料都是在百度上进行。
在这里！！！强烈建议大家科学上网！！！当我把软件续费以后，用谷歌重新试着查询之前的资料，发现之前尝试的一种插件，但苦于没有找到例子而不知道怎么使用，就一直未动。当我谷歌出使用流程以后，我抱着试一试的心态重新试了一下，这就是我的方案三。

方案二：使用插件saveSvgAsPng
废话不多说，上个官网网址，写的很清楚。
github:https://github.com/exupero/saveSvgAsPng
翻译版本:https://www.helplib.com/GitHub/article_110596
按照这上面的提示，一步步操作。
1.用npm把插件装上
npm install save-svg-as-png
2.在需要使用的vue文件中把js文件import进来
import saveSvg from 'save-svg-as-png';
3.对之前的按钮点击响应函数进行编写

saveSvgToPng: function () {
        //调研使用saveSvgAsPng 的方式
        saveSvg.saveSvgAsPng(document.getElementById("topologySvg"), "diagram.png",{height:800});
      },

官网上面给的例子直接使用的
saveSvgAsPng(document.getElementById("topologySvg"), "diagram.png")
但是这样的话，在我的vue框架下，是显示这个方法无效，所以需要使用前面import的文件名来进行调用。
我们调转这个函数，看下怎么回事。

out$.saveSvgAsPng = (el, name, options) => {
    requireDomNode(el);
    out$.svgAsPngUri(el, options || {}, uri => out$.download(name, uri));
  };

这个是引入插件中该方法的位置，很显然该方法需要三个参数，操作的元素、保存的文件名称以及一些参数。至于具体可以设置哪些参数来控制导出的png图片，官网给了一个清单，写的很清楚。比如我们想设置导出图片的宽度和高度为我们想要的值，就可以这么写：

saveSvg.saveSvgAsPng(document.getElementById("topologySvg"), "diagram.png",{height:800,width:1400});

至此，该功能就实现了，一行代码可以搞定的功能琢磨了一周多，以后一定要科学上网！！！百度真得往后稍稍。