Question

我使用Fabric.js来创建画布。我可以使用canvas.toSVG（）将整个画布保存为SVG + XML数据。我尝试实现的是获取我的画布的动态图像，当某个事件发生时（在这种情况下，它是onclick mybutton）。

现在我想用我的对象标签中的旧SVG替换新的SVG。我现在的方法是：

的 HTML 的

<input type="button" value="thumbMe" onclick="canvas2svg();" id="refresh" />
<object data="test2.xml" type="image/svg+xml" id="emb1" name="emb1" width="1000">
</object>

的的JavaScript 的

function canvas2svg() {
    var elem = document.getElementsByTagName("object")[0],
        copy = elem.cloneNode(),
        newsvg = canvas.toSVG();
    copy.data = testsvg;
    elem.parentNode.replaceChild(copy, elem);
}
document.getElementById('refresh').onclick = canvas2svg;

的问题 的通过运行它，我的object元素的data属性如下所示：

<object data="&lt;?xml version=&quot;1.0&.... and so on... </object>

这是因为newsvg中的XML的全部内容在data属性中被解析。我只需要替换object标签内的内容。有谁知道我的问题的解决方案？

Answer 1

我解决了我的问题，用另一种方法创建了Fabric.JS画布的动态thumnail。请参阅以下代码：

的 HTML 的

<input type="button" value="thumbMe" onclick="canvas2png();" id="refresh" /> <img src="placeholder.png" />

的的JavaScript 的

function canvas2png() { var img = canvas.toDataURL("image/png"), elem = document.getElementsByTagName("img")[0], elem.src = img; } document.getElementById('refresh').onclick = canvas2png;

希望这有助于任何人。

即时替换SVG + XML文件

1 个答案: