HTML Canvas : 앤티 앨리어싱을 사용하지 않고 이미지 그리기

Question

Canvas에서 일부 이미지의 픽셀 실제 렌더링을 수행하려고합니다. 지금은 자바 스크립트를 통해 이미지를 얻으므로 내 이미지는 HTMLImageElement 인스턴스입니다. drawImage을 사용하여 Canvas의 렌더링 컨텍스트에서이를 그릴 수 있습니다. 그러나 이것은 원하지 않는 이미지에 앤티 앨리어싱을 수행합니다.

개체에서 작동하는 putImageData이라는 하위 수준 이미지 조작 방법이있는 것으로 보입니다. 이 메서드는 앤티 앨리어싱을 수행합니까? 그렇지 않다면 내가 찾고있는 훌륭한 후보자이지만 HTMLImageElement을 ImageData 인스턴스로 변환하거나 블리트 할 수있는 방법을 찾지 못했습니다.

모든 조언을 환영합니다!

편집 : 내 원래의 문제가 해결되었습니다. 실수로 앤티 앨리어싱을 강제하는 부분적인 좌표가 생겼습니다. 이미지 - 데이터 변환 질문은 여전히 ​​유효합니다.

Answer 1

이미지를 ImageData 객체로 변환하는 유일한 방법은 캔버스에 먼저 그려야하기 때문에 임시 캔버스를 만들고 이미지를 그려서 거기에서 이미지 데이터를 가져와야합니다.

function imageToImageData(image) { 
    var canvas = document.createElement("canvas"); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(image, 0, 0); 
    return ctx.getImageData(0, 0, canvas.width, canvas.height); 
} 

참고하지만, 동일 출처 정책은 캔버스에 다른 도메인에서 이미지를 그릴 경우에만 문서 같은 도메인에서 이미지에서 작동하므로, 이 getImageData 전화에서 당신을 방지 함 . 다른 도메인에서 이미지를 그릴 필요가있는 경우 유일한 방법은 정확도에 영향을 줄 변형이 없는지 확인하기 위해 기본 캔버스의 컨텍스트에서 drawImage을 직접 호출하는 것입니다.