[英]Resource interpreted as Document but transferred with MIME type image/svg+xml:
[英]Replace SVG+XML file on the fly
我使用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;
問題通過運行此命令,我的對象元素的data屬性看起來如下所示:
<object data="<?xml version="1.0&.... and so on... </object>
這是因為newsvg中XML的全部內容都在data屬性中進行了解析。 我所需要做的就是替換object標簽內的內容。 有人知道我的問題的解決方案嗎?
我解決了我的問題,用另一種方法創建了Fabric.JS畫布的動態縮略圖。 請參見以下代碼:
的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;
希望這對任何人有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.