5

我在 HTML5 画布上绘制图像，图像的来源是 SVG 字符串。然后我 getImageData 的画布，这在 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 的方法，但它们的图像源是真实的 URL，而不是 SVG 字符串。

那么有什么方法可以使用 SVG 字符串作为图像源，但在 getImageData 时不会在 IE11 中调用安全错误？

4

0 回答 0