在画布上绘制背景图像

Question

I am trying to draw dom objects on to a canvas as shown below.

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

I have the below code and it appears as though background images don't work? Am I doing something wrong here? Or is there a way around it?

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

Maybe https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas same domain security reason:

Security

SVG images aren't allowed to load any external resources, for example, even ones that appear to be from the same domain. Resources such as raster images (such as JPEG images) or s have to be inlined as data: URIs.

Answer 2

SVG images aren't allowed to load any external resources, for example, even ones that appear to be from the same domain. Resources such as raster images (such as JPEG images) or s have to be inlined as data: URIs.

This is from the page you linked. This confirms that you can't use background images unless you convert them to data URIs. In itself, that's not too hard, all you have to do is copy the image to another canvas and use toDataURL() on it. However you will need to scan the input for any such images and it will still only work on same-domain resources.