0
이렇게 분명히 일부 브라우저에서는 꽤 많은 문제가 있습니다. 왜냐하면 캔버스 이미지에서 픽셀 데이터를 가져 오려고 시도 할 때 "캔버스가 더럽혀졌습니다" like :캔버스 이미지에서 픽셀 값을 얻으려면 CORS 제한
var pix = context.getImageData (3200,3200,1,1). 데이터;
지금까지 이미 crossorigin = ''및 XMLHttpRequest를 시도했지만 여전히 동일한 문제가 발생합니다. 다시 말하지만, 내가 잘못 구현하고 그냥 멍청한 짓인지 잘 모르겠습니다. 누군가가이 문제로 나를 도울 수 있다면 크게 감사 할 것입니다. 최후의 수단으로 포럼 질문을하기 전에 1.5 일 동안 고생했습니다. 내 코드는 Firefox 브라우저에서는 작동하지만 Chrome에서는 작동하지 않습니다. 필자의 구현에는 브라우저 간 기능이 중요합니다.
imageObj.onload = function() {
try
{
var inputFile = new XMLHttpRequest();
inputFile.open('get', 'gauteng.png', true); //open example file
inputFile.onreadystatechange = function()
{
if(inputFile.readyState==4) //document is ready to parse
{
context.drawImage(imageObj, 0, 0);
//pixel location from image
var imgd = context.getImageData(3200,3200,6029,6968);
var pix = imgd.data;
alert(pix[0].toString()+ " "+pix[1].toString()+" "+pix[2].toString());
}
}
inputFile.send(null); //close file after finished
}
catch(err){ alert(err.toString());}
};
감사합니다 :
이<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="6029" height="6968"></canvas>
<script> <!-- Javascript section-->
var canvas = document.getElementById('myCanvas'); //get canvas from html code via identity
var context = canvas.getContext('2d'); //get context of canvas
var imageObj = new Image(); //create image object
imageObj.src = 'gauteng.png'; //define the image of the image object
imageObj.onload = function() //trigger function after the image has loaded in image object
{
try
{
context.drawImage(imageObj,0,0); //draw the image object onto context of canvas
var imgd = context.getImageData(3200,3200,1,1); //get pixel at x coord 3200, and y coord 3200
var pix = imgd.data; //get the RGB values from pixel
// print out RGB values with alert
alert('R val= '+pix[0].toString()+ "\r\nG val= "+pix[1].toString()+"\r\nB val= "+pix[2].toString());
}
catch(err) //display error message if exception is thrown
{
alert(err.toString());
}
};
</script>
</body>
</html>
나는 또한 XMLHttpRequest를 내 접근 방식을 포함 할 수 있습니다 :이 작은 자바 스크립트 코드는 내가 문제를 격리하고, 시도하고 해결하기 위해 내 주요 프로젝트에서 추출 냈다입니다 미리.
당신은 이미지를로드는 XMLHttpRequest를 발사하는 데 도움이 희망 할 때의로드 이벤트 이미지가로드 될 경우 xmlhttprequest가 전송되기를 원하기 때문에 이미지가 제대로 작동하지 않습니다. 로딩이 실패하면 onload 함수가 트리거되지 않습니다. .onload 대신 .onerror 이벤트 처리기를 사용하려고 시도 할 수 있습니다. – Markai