javascript - 在 Canvas 上绘制背景图像

Question

我正在尝试将 dom 对象绘制到 Canvas 上，如下所示。

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 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.

这是来自您链接的页面。这确认您不能使用背景图像，除非您将它们转换为 data URI。就其本身而言，这并不太，您所要做的就是将图像复制到另一个 Canvas 并在其上使用toDataURL()。但是，您需要扫描输入以查找任何此类图像，并且它仍然只适用于相同域的资源。