Question

我在HTML5画布上绘制图像，图像源是SVG字符串。然后我得到了画布的图像数据，这在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中调用安全性错误？

如何在IE11中调用getImageData（）而不调用安全性错误？

0 个答案: