将SVG图像拖到画布上显示空白
我有一个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图像类型有关？ 这是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>
任何帮助都会很棒。 基本上，我想知道，为什么新创建的Image for my Canvas会绘制'data：image / svg + xml; base64'，我是否会转换错误的东西？
我解决了以下问题：
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);