svg下载图片

Question

在svg里插入一张图片

var imgs = svg.selectAll("img").data([0]);
    imgs.enter()
        .append("image")
        .attr("xlink:href", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514973056592&di=efe7ff93d30475b8d118d4ff1ca3b7ee&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2214231298%2C3303199284%26fm%3D214%26gp%3D0.jpg")
        .attr("x", "60")
        .attr("y", "60")
        .attr("width", "300")
        .attr("height", "300"); 

下载这张图片

var serializer = new XMLSerializer();  
        var source = serializer.serializeToString(svg.node());  
  
        source = '<?xml version="1.0" standalone="no"?>\r\n' + source;  
        var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);  
        document.write('<img src="' + url + '"/>');  
  
        var canvas = document.createElement("canvas");  
        canvas.width = width;  
        canvas.height = height;  
  
        var context = canvas.getContext("2d");  
        var image = new Image;  
        image.src = document.getElementsByTagName('img')[0].src;  
        image.onload = function() {  
            context.drawImage(image, 0, 0);  
   
            var a = document.createElement("a");  
            a.download = "fallback.png";  
            a.href = canvas.toDataURL("image/png");  
            a.click();  
        }; 

下载是右边那个残破打图片

怎么才能下载正确图片

Answer 1

 canvas.width = width;  
 canvas.height = height;

是不是这里的问题？应该是图片的宽和高属性吧？