5

HTML5 キャンバスに画像を描画します。画像のソースは SVG 文字列です。次に、キャンバスの ImageData を取得します。これは Firefox と Chrome ではうまく機能しますが、IE11 ではセキュリティ エラーが発生します。

問題を再現するための簡単なテスト ページを作成します。

<!DOCTYPE html>
<html>
<body>
<p>
    Click to run the function
    <button type="button" onclick="myFunction()">run</button>
</p>
<canvas id="myCanvas" width="300" height="150" style="border: 1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var svgString = "<svg stroke='black' width='50' height='50' xmlns='http://www.w3.org/2000/svg'><ellipse class='black' rx='29%' ry='29%' cy='50%' cx='50%' fill='transparent'/><svg width='100%' height='100%' viewBox='0 0 50 50' preserveAspectRatio='none' ><text class='blue' text-anchor='middle' font-size='24' y='33' x='25'>9</text></svg></svg>";
    var img = new Image();
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    };
    img.src = "data:image/svg+xml," + encodeURIComponent(svgString);

    var myFunction = function () {
        var imgData = ctx.getImageData(20, 20, 1, 1);
        alert(imgData.data[0] + "," + imgData.data[1] + "," + imgData.data[2]);
    };
</script>

</body>
</html>

XMLHttpRequest を使用した回避策をいくつか見つけましたが、それらの画像ソースは SVG 文字列ではなく実際の URL です。

SVG文字列を画像ソースとして使用する方法はありますが、getImageDataのときにIE11でセキュリティエラーを呼び出さないでしょうか?

4

0 に答える 0