Question

我正在尝试编写一些代码，将两个图像组合成一个结果图像，并在canvas元素中显示组合数据。我从本地计算机上加载了两个图像。然后我创建了两个新的canvas元素来绘制这些图像，然后将这些元素中的数据组合到页面本身的画布上。

但是，我收到此错误：

SecurityError：操作不安全。

我在这里看了几个关于SO的问题，例如SecurityError: The operation is insecure. using Htmlcanvas，但我不明白为什么当一切都在我的本地机器上时会发生这种情况。我知道没有提出CORS请求。

到目前为止，这是我的代码无法正常工作：

<!DOCTYPE html>
<html>
    <head>
        <title>Image Mix Test</title>
        <meta charset="UTF-8">
        <script>
            function init(event) {
                console.log('init');
                var img1 = document.getElementById('img1');
                var img2 = document.getElementById('img2');
                var canvas1 = document.createElement('canvas');
                var canvas2 = document.createElement('canvas');
                canvas1.width = img1.width;
                canvas1.height = img1.height;
                canvas2.width = img2.width;
                canvas2.height = img2.height;
                var ctx1 = canvas1.getContext('2d');
                var ctx2 = canvas2.getContext('2d');
                ctx1.drawImage(img1, 0, 0, ctx1.canvas.width, ctx1.canvas.height);
                ctx2.drawImage(img2, 0, 0, ctx2.canvas.width, ctx2.canvas.height);
                console.log(ctx1);
                console.log(ctx2);

                // *** The error is thrown on this next line... ***
                var data1 = ctx1.getImageData(0, 0, ctx1.canvas.width, ctx1.canvas.height);
                var data2 = ctx2.getImageData(0, 0, ctx2.canvas.width, ctx2.canvas.height);

                // TODO: write code that combines image data.
            }

            window.addEventListener('load', init, false);
        </script>
    </head>
    <body>
        <img id="img1" src="../default/assets/images/Tile01.jpg" style="display:block;"><br>
        <img id="img2" src="../default/assets/images/Tile03.jpg" style="display:block;"><br>
        <canvas id="canvas"></canvas>
    </body>
</html>

有关为何发生这种情况以及如何纠正的任何想法？

Answer 1

我设法通过复制我试图在HTML文件目录之外引用的图像文件来解决此问题。所以，现在我的图片网址只是src="Tile01.jpg"和src="Tile03.jpg"。

我试图重复使用上面另一个目录中的图像，然后再低于我当前的级别。它清楚地认为这是来自一个单独的网络，因为我使用file：///协议来查看文件。

getImageData：操作在本地机器上不安全

1 个答案: