0
결과 이미지에 두 이미지를 결합하고 결합 된 데이터를 캔버스 요소에 표시하는 코드를 작성하려고합니다. 내 로컬 컴퓨터의 페이지에 두 개의 이미지가로드되었습니다. 그런 다음 두 개의 새로운 캔버스 요소를 만들어 이러한 이미지를 그리면 해당 요소의 데이터를 결합하여 페이지 자체의 캔바스로 가져옵니다. SecurityError: The operation is insecure. using Htmlcanvas 나는 여기에 SO에 대한 몇 가지 질문을 살펴 보았다getImageData : 작업이 로컬 컴퓨터에서 안전하지 않습니다.
SecurityError: The operation is insecure.
, 등,하지만 모든 것이 내 로컬에있을 때 이런 일이 왜 볼 수 없습니다 :
그러나, 나는이 오류를 얻고있다 기계. 내가 알고있는 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>
어떤 생각 : 나는 예상대로
여기에 내 코드가 작동하지 않습니다이 지금까지입니까?
로컬 ('file : //') URL은 모두 서로 상대적으로 안전하지 않은 것으로 간주됩니다. 'README.html' 파일들과 같은 물고기 같은 것들이 당신의 컴퓨터로부터 내용을 훔치는 것을 막기 위해서입니다. – Pointy
일부 로컬 * 웹 서버 *를 사용하여 코드를 호스트하는 경우 문제가 해결됩니다. – Pointy
http 프로토콜로 localhost에 있습니까? 아니면 file : // 프로토콜에 있습니까? –