无法将包含文本和图像的SVG保存到画布
Not able to save SVG containing text and image to Canvas
我根据用户在文本框中的输入,在图像上绘制SVG中的文本
我想将SVG的图像和文本都捕获到画布中,以便
在画布上显示后,我可以将其转换为base64字符串。我能够捕获画布中的文本,但图像不显示。
<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/
这与中的问题相同:使用Canvas 的外部引用渲染SVG
您需要使用数据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/
相关文章:
- 如何自动保存动态生成的HTML SVG元素
- 保存嵌入对象中的svg
- 无法将包含文本和图像的SVG保存到画布
- 在web浏览器中保存操作过的SVG图像
- 使用jquery/javascript将amchart(多个SVG)保存为图像(jpg)
- 将SVG过滤器应用的图像转换为二进制或base64以保存在后端
- 将编辑的 SVG 文件另存为新文件或保存到数据库
- Raphael-保存动画后svg元素的属性
- 画布上的svg文本-如何将两者保存为单个png
- SVG和Javascript代码是否可以保存在单独的文件中,并且仍然让脚本操作SVG元素
- Snap.svg沿着一条路径拖动一个组并保存位置
- 正在尝试将SVG对象的javascript数组保存到SQL
- 将svg保存到磁盘作为png图像浏览器差异
- SVG将画布IE安全错误保存到DataURL
- 将多个svg保存到带有文本的画布上,然后获取dataURL
- 将SVG保存为png
- 保存SVG时,背景图像被遗漏
- 使用javascript重叠两个svg,并保存文件
- 使用xlink:href,将svg保存为png
- 在浏览器中生成、查看和保存SVG客户端