d3下载图片

最近做项目需要将d3画的图表保存到本地，下面是具体的实现

 var $svg = d3.select("#chart_detail svg")

            var serializer = new XMLSerializer();
            var source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString($svg.node());
            var image = new Image;
            image.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(source)));
            image.onload = function () {
                var canvas = document.createElement("canvas");
                canvas.width = $("#chart svg").width() + 140;
                canvas.height = $("#chart svg").height() + 40;
                var context = canvas.getContext("2d");
                context.fillStyle = '#fff';//设置保存后的PNG 是白色的  
                context.fillRect(0, 0, 10000, 10000);
                context.drawImage(image, 20, 20);
                var url = canvas.toDataURL("image/png");
                var pngName = "svgtoPng图";
                var a = document.createElement("a");
                a.download = pngName + ".png";
                a.href = url;
                a.click();
                return