d3.js绘制的svg图像保存为png图片

思路：（svg => canvas => png）

1. 把svg作为dataurl放在image
2. 创建一个canvas来显示image
3. 利用canvas.toDataURL存为图片
4. 创建a标签出发浏览器下载

核心代码：

        var serializer = new XMLSerializer();
        var source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(this.SVG.node());
        var image = new Image;
        image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
        var canvas = document.createElement("canvas");
        canvas.width = 1000;
        canvas.height = 800;
        var context = canvas.getContext("2d");
        context.fillStyle = '#fff';//#fff设置保存后的PNG 是白色的  
        context.fillRect(0, 0, 10000, 10000);
        image.onload = function() {  
          context.drawImage(image, 0, 0);  
          var a = document.createElement("a");  
          a.download = "name.png";  
          a.href = canvas.toDataURL("image/png");  
          a.click();  
      };