将带有图像元素的svg转换为html canvas [英] Converting svg with image element to html canvas

问题描述

我只是想将svg转换为html canvas，直到我在svg中使用图像元素，如果我使用图像元素意味着canvg无法正常工作，它就可以正常工作.

I'm just trying to convert svg to html canvas, it works fine until i use image element in svg, if i use image elements means canvg is not working.

这是我用来将svg转换为画布的代码

This is the code which i used to convert svg to canvas

var svgCanvas, context, svgCanvasElement, link;
svgCanvas = $('<canvas id="svgCanvas" width="250px" height="25px" style="display:none;"></canvas>');
context = svgCanvas[0].getContext('2d');
svgCanvasElement = $(svgCanvas)[0];
var serializer = new XMLSerializer();
var svgElement = document.getElementsByTagName("svg");
var svg = serializer.serializeToString(svgElement[0]);
var canvgMethod = new canvg(svgCanvasElement, svg);

此处不起作用 JSFiddle演示版.

注意:该代码对于其他元素(例如圆形，矩形，多边形等)都可以正常工作.这在带有圆圈元素的JSFiddle演示.

NOTE : This code working fine for other elements like circle,rect,polygon and etc. Here is working JSFiddle Demo with circle element.

如何克服这个问题，如何将图像元素转换为画布?
任何建议将不胜感激.

How to overcome this issue and how can i convert this image element into canvas?
Any Suggestions will be appreciated.

推荐答案

您需要将图像转换为数据URL.您传递给canvg的内容必须在一个文件中完整，并且不能包含外部引用.

You'd need to convert the image into a data URL. What you pass to canvg must be complete in a single file it can't have external references.

我可以向您展示查看图像作品的步骤.从这里开始...

I can show you steps to see an image work. Start from this...

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="paste your data URL in here" height="75" width="75" y="27.5" x="29.5"></image>
</svg>

1. goto http://dopiaza.org/tools/datauri/index.php
2. 选择从URL检索
3. 输入 http://archiveteam.org/images /thumb/4/40/Google_Logo.png/800px-Google_Logo.png 作为网址
4. 将输出替换在上面指示的位置(太大，无法在此处包含)
5. 将上面的全部内容粘贴到测试中在此处框
6. 您已完成，请在左侧看到结果.请注意，我仅在Firefox上进行过测试.

1. goto http://dopiaza.org/tools/datauri/index.php
2. Select retrieve from a URL
3. Enter http://archiveteam.org/images/thumb/4/40/Google_Logo.png/800px-Google_Logo.png as the URL
4. Replace the output in the place indicated above (it's too big to include here)
5. Paste the whole lot above into the test box here
6. You're done, see the result on the left. Note I've only tested this on Firefox.

这篇关于将带有图像元素的svg转换为html canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！