0

以下に示すように、キャンバスに dom オブジェクトを描画しようとしています。

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

以下のコードがありますが、背景画像が機能しないように見えますか? ここで何か間違ったことをしていますか？またはそれを回避する方法はありますか？

フィドルを見る

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

2 に答える 2

1

たぶんhttps://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas同じドメインセキュリティの理由：

安全

SVGイメージは、同じドメインからのものであるように見える外部リソースなど、外部リソースをロードすることは許可されていません。ラスター画像（JPEG画像など）やsなどのリソースは、データとしてインライン化する必要があります：URI。

于 2013-03-04T22:58:49.863 に答える
1

SVGイメージは、同じドメインからのものであるように見える外部リソースなど、外部リソースをロードすることは許可されていません。ラスター画像（JPEG画像など）やsなどのリソースは、データとしてインライン化する必要があります：URI。

これは、リンクしたページからのものです。dataこれにより、背景画像をURIに変換しない限り使用できないことが確認されます。それ自体はそれほど難しいことではありません。あなたがしなければならないのは、画像を別のキャンバスにコピーして使用toDataURL()することだけです。ただし、そのような画像の入力をスキャンする必要がありますが、それでも同じドメインのリソースでのみ機能します。

于 2013-03-04T22:59:25.527 に答える