[英]Replace SVG+XML file on the fly
I use Fabric.js to create a canvas. 我使用Fabric.js创建画布。 I can save the whole canvas with canvas.toSVG() as SVG+XML data.
我可以使用canvas.toSVG()将整个画布保存为SVG + XML数据。 What I try to achieve is to get a dynamic image of my canvas, when a certain event occurs (in this case it is onclick mybutton).
我试图实现的是在发生某个事件(在本例中为onclick mybutton)时获取画布的动态图像。
Now I want to replace the new SVG with the old SVG inside my object tag. 现在,我想用我的对象标签中的旧SVG替换新的SVG。 My approach for now:
我现在的方法是:
HTML 的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 的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;
Problem By running this, the data attribute of my object element looks like the following: 问题通过运行此命令,我的对象元素的data属性看起来如下所示:
<object data="<?xml version="1.0&.... and so on... </object>
This is because the whole content of the XML from newsvg is parsed inside the data attribute. 这是因为newsvg中XML的全部内容都在data属性中进行了解析。 All I need is to replace the content inside the object tag.
我所需要做的就是替换object标签内的内容。 Does anyone know a solution to my problem?
有人知道我的问题的解决方案吗?
I solved my problem, to create a dynamic thumnail of an Fabric.JS canvas with another approach. 我解决了我的问题,用另一种方法创建了Fabric.JS画布的动态缩略图。 See the following code:
请参见以下代码:
HTML 的HTML
<input type="button" value="thumbMe" onclick="canvas2png();" id="refresh" />
<img src="placeholder.png" />
JavaScript 的JavaScript
function canvas2png() {
var img = canvas.toDataURL("image/png"),
elem = document.getElementsByTagName("img")[0],
elem.src = img;
}
document.getElementById('refresh').onclick = canvas2png;
Hope this helps anyone. 希望这对任何人有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.