Я пытаюсь написать код, который объединяет два изображения в результирующее изображение и отображает объединенные данные в элементе холста. У меня есть два изображения, загруженные на страницу с моей локальной машины. Затем я создаю два новых элемента canvas для рисования этих изображений, а затем беру данные из этих элементов для комбинации в холст на самой странице.getImageData: операция небезопасна на локальной машине
Однако, я получаю эту ошибку:
SecurityError: The operation is insecure.
Я смотрел на несколько вопросов здесь, на 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>
Любые мысли о том, почему это происходит и как это исправить?
Локальные ('файл: //') URL-адреса считаются относительно небезопасными друг для друга. Это необходимо для предотвращения появления подозрительных вещей, таких как файлы README.html, от кражи содержимого с вашего компьютера. – Pointy
Если вы размещаете свой код с помощью локального * веб-сервера *, то все будет работать. – Pointy
Вы находитесь в localhost по протоколу http или находитесь в файле: // protocol? –