在畫布上繪製背景圖像

Question

我想將dom對象繪製到畫布上，如下所示。

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

我有下面的代碼，它看起來好像背景圖片不工作？我在這裏做錯了什麼？或者有沒有辦法解決它？

See Fiddle

<canvas id="canvas" style="border:2px solid black;" width="400" height="300"></canvas> 
    <div style='background-color:red' class='test'><h1>Hello World</h1></div> 
    <div style='background-image:url(http://lorempixel.com/400/100/transport/)' class='test'><h1>Hello World</h1></div> 


    <script> 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>" + 
       "<foreignObject width='100%' height='100%'>" + 
        "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" + 
     "<div style='background-color:red' class='test'><p>Hello World</p></div>" + 
     "<div style='background-image:url(http://lorempixel.com/500/500/transport/)' class='test'><p>Hello World</p></div>" + 
        "</div>" + 
       "</foreignObject>" + 
       "</svg>"; 
    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> 

Answer 1

SVG圖像不允許加載任何外部資源，例如，即使是顯示來自同一個域的資源。諸如光柵圖像（如JPEG圖像）或s等資源必須內聯爲數據：URI。

這是來自您鏈接的頁面。這確認您不能使用背景圖片，除非您將它們轉換爲data URI。本身，這也不是太難，你所要做的就是將圖像複製到另一個畫布上，並使用toDataURL()就可以了。但是，您將需要掃描任何此類圖像的輸入，並且它仍然只能在同域資源上工作。

Answer 2

也許https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas同一域安全理由：

安全

SVG圖像不允許加載任何外部資源，例如，即使是看似來自那些同一個域名。諸如光柵圖像（如JPEG圖像）或s等資源必須內聯爲數據：URI。