无法将包含文本和图像的SVG保存到Canvas中

我正在根据用户在文本框中输入的图像在SVG中绘制文本。
我想要将SVG的图像和文本都捕获到画布上，以便
我可以在画布上显示它之后将其转换为基本64字符串。我可以用捕捉画布中的文字，但图像不显示。无法将包含文本和图像的SVG保存到Canvas中

<body> 
    <svg id="svgelem" class="scaling-svg" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <image xlink:href="http://i.imgur.com/PWSOy.jpg" x="0" y="0" height="200" width="200" /> 
     <text x="38%" y="68%" alignment-baseline="middle" text-anchor="middle" font-family="Calibri" font-size="25" id="textbox" fill="black"></text> 
    </g> 
    </svg> 
    <input type="text" name="name" id="name" maxlength="26" /> 
    <input type="submit" id="drawText" value="Draw It" /> 

    <div style="clear:both;"></div> 
    <br/> 
    <canvas id="canvas" style="border:2px solid black;" width="250" height="250"> 
    </canvas> 
</body>

看一看的jsfiddle

这里有一个链接
https://jsfiddle.net/atulpr/0yhpygue/14/

来源

2016-05-12 Atul Prajapati

这是相同的问题：Render SVG with external references to Canvas

您需要嵌入与数据URI图像，而不是使用外部URL。

function embedImage(imageElement) { 
    var image = new Image(); 
    image.setAttribute('crossOrigin', 'anonymous'); 
    image.src = imageElement.getAttribute('xlink:href'); 
    image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    canvas.getContext('2d').drawImage(image, 0, 0); 
    imageElement.setAttribute('xlink:href', canvas.toDataURL('image/png')); 
    } 
}

https://jsfiddle.net/0yhpygue/15/

来源

2016-05-15 05:44:50 szym

非常感谢，它的工作！ –

在jsfiddle中提供的代码在chrome中工作，但不在Firefox中，而不在IE中。另外在IE中，文本在写入文本框时不显示，请查看新的小提琴https://jsfiddle.net/atulpr/0yhpygue/19/ –

无法将包含文本和图像的SVG保存到Canvas中

回答

相关问题