svg到PNG不工作，懷疑svg元素差異

我無法弄清楚爲什麼兩個不同的svg會導致我的JavaScript在一個實例工作，但不在其他。在這兩個例子中，我只換出了svg元素，其中一個是有效的，一個不是。這裏是兩個jsFiddles中的代碼。我從here得到的工作例子。svg到PNG不工作，懷疑svg元素差異

最終，我的目標是保存平面圖的當前svg元素，並將轉換後的png作爲內聯img插入富文本區域中。就好像您截取了平面圖的截圖一樣，並將其粘貼到您在幫助臺網站中看到的豐富文本區域。我只是無法轉換爲PNG。

工作：JsFiddle

不工作：JsFiddle

這裏是JS，我不能加入SVG代碼，否則它將讓我在＃1的字符限制。

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2')); 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([svgString], { 
    type: "image/svg+xml;charset=utf-8" 
}); 
var url = DOMURL.createObjectURL(svg); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    var png = canvas.toDataURL("image/png"); 
    document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>'; 
    DOMURL.revokeObjectURL(png); 
}; 
img.src = url;

編輯：

因爲我已經看中了這個代碼省略PNG /帆布轉換，並試圖放置SVG的序列化的字符串，直接將富文本區域，但它會得到一個錯誤在IE中，非默認名稱空間聲明不能包含空的URI。線路：1，column142

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2')); 

var img = new Image(); 

var url = "data:image/svg+xml; charset=utf8, "+encodeURIComponent(svgString); 
img.onload = function() { 

    document.querySelector('.ze_body').innerHTML = '<img src="'+url+'"/>'; 

}; 
img.src = url;

此外，我認爲這將有助於如果我表現出更多的這個富文本區域目前如何坐鎮結構。這不是我們的做法，它是我們使用的產品，我只是試圖讓地圖粘貼到描述區域，以便它可以與票證一起生活。只有我們擁有的訪問權限是由表單中的規則觸發的。 Screenshot of ze_body element as it stands in the DOM

來源

2015-07-21 Dogbyte

它出自您的命名空間聲明：

變化xmlns:NS1="" NS1:xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:NS2="" NS2:xmlns:cc="http://creativecommons.org/ns#" xmlns:NS3="" NS3:xmlns:dc="http://purl.org/dc/elements/1.1/"

到xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">並should work。

還要注意，由於您使用的XMLSerializer().serializeToString()，你並不需要創建一個blob和objectURL，你只能通過data:image/svg+xml; charset=utf8, "和encodeURIComponent(svgString)作爲圖像的URL。（fiddle）。

ps：您可以閱讀關於命名空間聲明here。

來源

2015-07-22 07:04:58 Kaiido

非常感謝你們，我看到人們一直在視頻中清理命名空間，但是我用這些視圖製作了這些視圖，甚至將它們保存在優化之中，但仍然留下了大量的清理工作。我有更多的閱讀做，看起來像，再次感謝。 – Dogbyte

你知道爲什麼你的Jsfiddle不能在IE中工作嗎？我原本在Chrome中試過，但我也需要這個在IE 11中工作。我不能在控制檯中得到任何錯誤，但PNG img絕對不是打印到屏幕上。 – Dogbyte

是的，IE對這項任務非常有限。顯然它不支持任何命名空間的聲明......如果你全部刪除它們，你可以畫到canvas：http://jsfiddle.net/jdh0y4c2/9/。但是，它會污染畫布，使其無法傳遞其'dataURL'或'imageData'（顯然，IE開發人員認爲svg可以包含腳本，因此畫布CORS應該適用於繪製到畫布中的任何svg圖像。我不知道任何解決方法，除了一個問你的IE用戶右鍵單擊svg或畫布，'保存圖像爲...'，但它不會在你的情況下有用... – Kaiido

svg到PNG不工作，懷疑svg元素差異

回答

相關問題