Нарисуйте фоновое изображение на холсте

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.

Это со страницы, ссылки на которую вы указали. Это подтверждает, что вы не можете использовать фоновое изображение, если вы не конвертируете их в URI data. Само по себе это тоже не сложно, все, что вам нужно сделать, это скопировать изображение на другой холст и использовать на нем toDataURL(). Однако вам нужно будет отсканировать входные данные для любых таких изображений, и он будет работать только на ресурсах одного домена.

Answer 2

Может https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas той же причине безопасности домена:

безопасности

SVG изображения не разрешено загружать любые внешние ресурсы, например, даже те, которые кажутся из тот же домен. Такие ресурсы, как растровые изображения (например, изображения JPEG) или s, должны быть вложены как данные: URI.