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";

这样可以正常工作并写入我的Canvas。我猜它与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>

任何帮助都会很棒。基本上，我想知道，为什么我为Canvas新创建的Image会绘制＆＃39;数据：image / svg + xml; base64＆＃39;，我转换错了什么？

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);

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

1 个答案: