HTML5 캔버스에서 getImageData를 사용하여 하위 이미지의 부 영상을 얻는 방법

Question

HTML5 캔버스를 사용하면 아무런 문제없이 이미지의 부 영상을 얻을 수 있습니다. 다음과 같이 :

var imageData = context.getImageData (5, 5, 10, 10); var d = imageData.data

그러나이 데이터의 다른 하위 이미지를 가져 오는 방법은 없습니다.

이전에 반환 된 하위 이미지의 var imageData = context.getImageData (0, 0, 2, 2).이 작업을 수행하고 싶었습니다.

이것은 실제로 (5, 5, 2, 2)가됩니다.

대부분의 그래픽 라이브러리에서 하위 이미지가 포함 된 이미지로 재귀 적으로 드릴 다운 할 수 있습니다. 캔버스에 비슷한 것이 있습니까?

Answer 1

직접 rect 개체를 만들고이 개체를 사용하여 하위 선택을 수행 할 수 있지만 초기 캔버스 요소에서 직접 데이터를 가져올 수 있습니다.

뭔가 다른 방법

function rect(x, y, w, h) { 
    this.x = x; 
    this.y = y; 
    this.width = w; 
    this.height = h; 
} 

rect.prototype.getRect = function(x, y, w, h) { 
    return new rect(this.x + x, this.y + y, w, h); 
}; 

var initial = new rect(5,5,10,10); 
var second = initial.getRect(0,0,2,2); 

---

처럼 당신은 ...에 대한