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格式，希望对大家有所帮助