將帶有圖像標簽的Svg轉換為PNG

Question

我想將SVG數據轉換為PNG。 為此，我使用canvas和drawimage()函數。 這可以100％正常工作，並將我的svg轉換為png，但是如果我的svg具有任何圖像標簽，則它將無法工作。

看看我的偽代碼：

<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？ 需要幫助謝謝

小提琴

Answer 1

遺憾的是，您將無法同時使用外部資源-

以下是有關安全性的鏈接：

... SVG圖像的實施非常嚴格。 SVG映像不允許加載任何外部資源，例如，即使看起來似乎來自同一域的資源也是如此。 必須將諸如光柵圖像（例如JPEG圖像）或<iframe>之類的資源作為數據內聯：URI。

由於圖像引用的是外部來源，因此在繪制到畫布時會增加安全限制。

此外，在此鏈接中進行了說明（顯然適用於Chrome等）：

限制條件

為了安全起見，Gecko在用作圖像時，對SVG內容設置了一些限制：
 - JavaScript is disabled. - External resources (eg 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. 
請注意，以上限制特定於圖像上下文 ； 當直接查看SVG內容或通過<iframe>，<object>或<embed>元素將其作為文檔嵌入時，它們不適用。

這意味着您需要將圖像提供為帶有data-uri的Blob對象集。 我認為，這樣就可以輕松地忽略SVG中的image標簽（或先提取它），然后再簡單地引用image url並將其分別繪制到畫布上（如果這樣做，如果image為在堆棧中間）。

Answer 2

首先下載一個js庫svg_todataurl.js並包含它

然后粘貼此代碼

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

將帶有圖像標簽的Svg轉換為PNG

問題描述

2 個解決方案

解決方案1
1

解決方案2
1 2014-04-17 07:55:04

將帶有圖像標簽的Svg轉換為PNG

問題描述

2 個解決方案

解決方案1 1

解決方案2 1 2014-04-17 07:55:04

解決方案1
1

解決方案2
1 2014-04-17 07:55:04