将带有图像元素的svg转换为html canvas

Question

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

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

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 DEMO 。

注意：此代码对于其他元素（如圆形，矩形，多边形等）都可以正常工作。这是带圆形元素的JSFiddle Demo 。

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

Answer 1

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

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

<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. 转到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上进行了测试。

Answer 2

试试看： -http : //jsfiddle.net/adiioo7/xvQHb/3/

使用canvg插件参考完成

//load a svg snippet in the canvas with id = 'drawingArea'
  canvg(document.getElementById('canvas'), '<svg>...</svg>')