將帶圖像標籤的Svg轉換爲PNG

我想將SVG數據轉換爲PNG。爲此，我正在使用canvas和drawimage()函數。這工作100％罰款，並將我的SVG轉換爲PNG，但如果我的SVG有任何圖像標記，那麼它不會工作。將帶圖像標籤的Svg轉換爲PNG

在我的虛擬代碼一看： -

<html> 
    <body> 
     <div id="mainsvg"> 
      <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'> 
      <rect x='0' y='0' width='50' height='100' fill='red'></rect> 
      <image x='50' y='0' width='100' height='100' xlink:href='http://www.rashflash.com/assets/images/homepage/bubble2.png'/> 
      </svg> 
     </div> 
     <p> 
      <canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas> 
      <script> 
       var canvas = document.getElementById("canvas"); 
       var ctx = canvas.getContext("2d"); 
       var mainsvg=document.getElementById('mainsvg'); 
       var data =mainsvg.innerHTML; 
       var DOMURL = self.URL || self.webkitURL || self; 
       var img = new Image(); 
       var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); 
       var url = DOMURL.createObjectURL(svg); 
       img.onload = function() { 
        ctx.drawImage(img, 0, 0); 
        DOMURL.revokeObjectURL(url); 
       }; 
       img.src = url; 
      </script> 
    </body> 
</html>

上面的代碼生成的圖像僅在我的SVG是如下： -

<div id="mainsvg"> 
    <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'> 
     <rect x='0' y='0' width='50' height='100' fill='red'></rect>    
    </svg> 
</div>

爲什麼不把它轉換SVG的imagetag ？需要幫助的感謝

Fiddle

來源

2013-10-04 RashFlash

可悲的是，你將無法在這個組合利用外部資源 -

這就是在this link中關於安全聲明：

... SVG圖像的實現是非常嚴格的。 SVG圖像不允許加載任何外部資源，例如，即使是似乎來自同一個域的。資源（如光柵圖像（如JPEG圖像）或<iframe>必須作爲數據內聯： URI。

由於圖像引用的是外部來源，所以在繪製到畫布時會遇到安全限制。

而且它是在this link規定（同樣顯然適用於Chrome瀏覽器等）：

限制

爲了安全起見，壁虎放在SVG內容一些限制，當它被用作一個圖像：
- JavaScript is disabled. 
- External resources (e.g. images, stylesheets) cannot be loaded, 
though they can be used if inlined through BlobBuilder object URLs or 
data: URIs. 
- :visited-link styles aren't rendered. 
- Platform-native widget styling (based on OS theme) is disabled. 
請注意，上述restr摩擦特定於圖像上下文;它們當SVG內容直接觀察不適用，或當它經由<IFRAME>，<對象>，或<嵌入作爲文檔嵌入>元件。

這意味着您需要提供圖像作爲一個Blob對象設置與data-uri。我認爲它會變得更容易忽略SVG中的圖像標記（或先提取它），然後簡單地引用圖像url並將其分別繪製到畫布上（如果當然，如果圖像是在堆棧中間）。

來源

2013-10-04 07:05:03 K3N

先下載一個js庫svg_todataurl.js，包括它

然後就將此代碼粘貼

var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");

來源

2014-04-17 07:55:04 yellowcode

將帶圖像標籤的Svg轉換爲PNG

回答

相關問題