JavaScript 下载svg图片为png格式

1.遇到需要将svg下载的需求，网上找了一些代码，地址是这个https://github.com/exupero/saveSvgAsPng，但是不太好用，莫名的把网页所有的svg都下载了，于是在源码的基础上做了一些小的修改；代码如下所示

var doctype = \'<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\" [<!ENTITY nbsp \" \">]>\'; 
function convertToPng(src, w, h) { 
      var canvas = document.createElement(\'canvas\'); 
      var context = canvas.getContext(\'2d\'); 
      canvas.width = w; 
      canvas.height = h; 
      context.drawImage(src, 0, 0); 
      var png; 
      try { 
        png = canvas.toDataURL(\"image/png\"); 
      } catch (e) { 
        if ((typeof SecurityError !== \'undefined\' && e instanceof SecurityError) || e.name == \"SecurityError\") { 
          console.error(\"Rendered SVG images cannot be downloaded in this browser.\"); 
          return; 
        } else { 
          throw e; 
        } 
      } 
      return png; 
    } 
    function isElement(obj) { 
      return obj instanceof HTMLElement || obj instanceof SVGElement; 
    } 
    function reEncode(data) { 
      data = encodeURIComponent(data); 
      data = data.replace(/%([0-9A-F]{2})/g, function (match, p1) { 
        var c = String.fromCharCode(\'0x\' + p1); 
        return c === \'%\' ? \'%25\' : c; 
      }); 
      return decodeURIComponent(data); 
    } 
    function uriToBlob(uri) { 
      var byteString = window.atob(uri.split(\',\')[1]); 
      var mimeString = uri.split(\',\')[0].split(\':\')[1].split(\';\')[0] 
      var buffer = new ArrayBuffer(byteString.length); 
      var intArray = new Uint8Array(buffer); 
      for (var i = 0; i < byteString.length; i++) { 
        intArray[i] = byteString.charCodeAt(i); 
      } 
      return new Blob([buffer], {type: mimeString}); 
    } 
    function downLoad(el, name) { 
      if (!isElement(el)) { 
        throw new Error(\'an HTMLElement or SVGElement is required; got \' + el); 
      } 
      if (!name) { 
        console.error(\"文件名为空!\"); 
        return; 
      } 
      var xmlns = \"http://www.w3.org/2000/xmlns/\"; 
      var clone = el.cloneNode(true); 
      clone.setAttribute(\"version\", \"1.1\"); 
      if (!clone.getAttribute(\'xmlns\')) { 
        clone.setAttributeNS(xmlns, \"xmlns\", \"http://www.w3.org/2000/svg\"); 
      } 
      if (!clone.getAttribute(\'xmlns:xlink\')) { 
        clone.setAttributeNS(xmlns, \"xmlns:xlink\", \"http://www.w3.org/1999/xlink\"); 
      } 
      var svg = clone.outerHTML; 
      var uri = \'data:image/svg+xml;base64,\' + window.btoa(reEncode(doctype + svg)); 
      var image = new Image(); 
      image.onload = function () { 
        var png = convertToPng(image, image.width, image.height); 
        var saveLink = document.createElement(\'a\'); 
        var downloadSupported = \'download\' in saveLink; 
        if (downloadSupported) { 
          saveLink.download = name + \".png\"; 
          saveLink.style.display = \'none\'; 
          document.body.appendChild(saveLink); 
          try { 
            var blob = uriToBlob(png); 
            var url = URL.createObjectURL(blob); 
            saveLink.href = url; 
            saveLink.onclick = function () { 
              requestAnimationFrame(function () { 
                URL.revokeObjectURL(url); 
              }) 
            }; 
          } catch (e) { 
            saveLink.href = uri; 
          } 
          saveLink.click(); 
          document.body.removeChild(saveLink); 
        } 
      }; 
      image.src = uri; 
    } 

这里使用的时候只需要调用download方法就可以了，建议封装成一个单独的下载服务；download方法的第一个参数el指的是dom元素，就是svg元素，具体的获取方法通过js或者d3的选择器都可以；例如

<div id=\"svg-parent-div\"><svg>...</svg></div> 

一般通过获取svg的父元素来找到它，比如

var el = d3.select(\"#svg-parent-div\").node().children[0]; 
download(el,\"下载图片\"); 

这样就可以了；

代码对于svg的没设置命名空间的情况做了处理，通过如下代码，如果svg 元素没有 设置命名空间，则添加； 

el.setAttributeNS(xmlns, \"xmlns\", \"http://www.w3.org/2000/svg\"); 
el.setAttributeNS(xmlns, \"xmlns:xlink\", \"http://www.w3.org/1999/xlink\"); 

同时，添加的命名空间作用在clone的元素上，不会影响原来的svg元素；

以上所述是小编给大家介绍的JavaScript 下载svg图片为png格式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！