首頁猿問如何在畫布上繪制內嵌svg（在DO...

如何在畫布上繪制內嵌svg（在DOM中）？

JavaScript Html/CSS

慕沐林林 2019-11-14 10:17:24

好吧，我需要一些有關將.svg文件/圖像轉換為.png文件/圖像的幫助...我的頁面上顯示了一個.svg圖像。它保存在我的服務器上（.png文件）。我需要按需將其轉換為.png文件（單擊按鈕），然后將.png文件保存在服務器上（我將通過.ajax請求執行此操作）。但是問題是轉換。我閱讀了很多有關html5 Canvas的內容，這些內容可能可以幫助我做我現在需要做的事情，但是我找不到解決我問題的明確方法，而且，我不明白自己所發現的一切...所以我需要一些明確的建議/幫助，以幫助我了解如何做。這是“ html idea”模板：<html> <body> <svg id="mySvg" width="300px" height="300px">  </svg> <label id="button">Click to convert</label> <canvas id="myCanvas"></canvas> </body></html>和一些js：<script> $("body").on("click","#button",function(){ var svgText = $("#myViewer").outerHTML; var myCanvas = document.getElementById("canvas"); var ctxt = myCanvas.getContext("2d"); });</script>然后，我需要將svg繪制到Canvas中，取回base64數據，并將其保存在服務器上的.png文件中...但是...如何？我讀到了很多不同的解決方案，我實際上...迷路了...我正在使用jsfiddle，但是實際上我...無處... http://jsfiddle.net/xfh7nctk/6 / ...感謝您的閱讀/幫助

查看完整描述

3 回答

三國紛爭

TA貢獻1804條經驗獲得超7個贊

對于嵌入式SVG，您需要：

將SVG字符串轉換為 Blob

獲取Blob的URL

創建圖像元素并將URL設置為 src

加載（onload）后，您可以將SVG繪制為畫布上的圖像

用于toDataURL()從畫布獲取PNG文件。

例如：

function drawInlineSVG(ctx, rawSVG, callback) {

var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),

domURL = self.URL || self.webkitURL || self,

url = domURL.createObjectURL(svg),

img = new Image;

img.onload = function () {

ctx.drawImage(this, 0, 0);

domURL.revokeObjectURL(url);

callback(this);

};

img.src = url;

}

// usage:

drawInlineSVG(ctxt, svgText, function() {

console.log(canvas.toDataURL()); // -> PNG data-uri

});

當然，此處的console.log僅作為示例。請在此處存儲/傳輸字符串。（我也建議onerror在方法內部添加一個處理程序）。

另外，請記住使用width和height屬性設置畫布大小，或者使用屬性從JavaScript 設置畫布大小。

反對回復 2019-11-14

慕工程0101907

TA貢獻1887條經驗獲得超5個贊

我很久以后才提出這個問題，因為接受的答案可能會產生不良行為。

@ K3N解決方案幾乎是正確的，但我反對使用svgElement.outerHTML。

相反，應該更喜歡new XMLSerializer().serializeToString(svgElement)。

同樣，也不需要使用Blob和URL API，并且簡單的dataURI在瀏覽器中具有更大的兼容性。

這樣的完整版本是：

function drawInlineSVG(svgElement, ctx, callback){

var svgURL = new XMLSerializer().serializeToString(svgElement);

var img = new Image();

img.onload = function(){

ctx.drawImage(this, 0,0);

callback();

}

img.src = 'data:image/svg+xml; charset=utf8, '+encodeURIComponent(svgURL);

}

//usage :

drawInlineSVG(document.querySelector('svg'), ctxt, function(){console.log(canvas.toDataURL())})

反對回復 2019-11-14

長風秋雁

TA貢獻1757條經驗獲得超7個贊

這不是CORS問題。一些UA在畫布上繪制某些svg元素時具有安全限制。這在哪個瀏覽器上發生？如果IE <Edge，則所有svg都會污染畫布。唯一的解決方法：使用畫布繪制方法重現svg（這是canvg之類的庫所執行的操作）。對于其他UA，您的svg中可能有一個foreignObject元素。不幸的是，Safari和chrome在某些情況下并不真正喜歡它，除了刪除此元素或將其替換為ots內容上的html2canvas結果之外，沒有其他解決方法。

反對回復 2019-11-14

3 回答
0 關注
991 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

如何在畫布上繪制內嵌svg（在DOM中）？

如何在畫布上繪制內嵌svg（在DOM中）？

3 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在畫布上繪制內嵌svg（在DOM中）？

如何在畫布上繪制內嵌svg（在DOM中）？

3 回答

相關問題推薦

添加回答

如何在畫布上繪制內嵌svg（在DOM中）？