我正在尝试编写一些代码，将两个图像合并成一个结果图像，并在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>
有什么想法为什么会发生以及如何纠正呢？
最佳答案
我设法通过将要引用的图像文件复制到HTML文件的目录之外来解决此问题。因此，现在我的图像URL就是src="Tile01.jpg"和src="Tile03.jpg"。
我试图重用当前级别之上和之下的另一个目录中的图像。显然认为这是来自单独的网站，因为我正在使用file：///协议来查看文件。