将 SVG 图像绘制到显示为空白的画布

Question

我有一个 SVG 标签。单击按钮后，将在 SVG 标记内动态创建 SVG 图像。

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS(null,'height','450');
svgimg.setAttributeNS(null,'width','845');
svgimg.setAttribute('class', 'dragImage');
svgimg.addEventListener("mousedown", dragFunc);
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', '/images/dog.jpg');
$('#svg').append(svgimg);

效果很好。然后，通过单击不同的按钮，我将获取该 SVG，并将其转换为 Canvas。

 var svgContent= document.querySelector('svg').innerHTML;

var img = new Image();


var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
img.onload = function(){
    context.drawImage(img, 0, 0);

}
 img.src = "data:image/svg+xml;base64,"+btoa(svgContent);

但是，这显示为空白，空的。没有图像。如果我手动将 img.src 设置为

    img.src = "images/dog.jpg";

这可以正常工作并写入我的画布。我猜它与 SVG Image 类型有关？这是 HTML：

   <div id="parentDiv">
   <svg id='svg' width="845" height="450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"></svg>
   </div>
   <canvas id="canvas" width="1000px" height="600px"></canvas>

任何帮助都会很棒。本质上，我想知道，为什么为我的 Canvas 新创建的图像会绘制 'data:image/svg+xml;base64'，我是不是在转换错误？

Answer 1

我解决了以下问题：

var svg = document.getElementsByTagName('svg')[0];
var svg_xml = (new XMLSerializer()).serializeToString(svg);
svg.remove();

// write serialized svg to canvas
canvg('canvas', svg_xml, {useCORS: true});

// create canvas data on demand
function downloadCanvas() {
    this.href = canvas.toDataURL('image/png');
};
document.getElementById('imgId').addEventListener('click', downloadCanvas, false);