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); 

---

ような何か別の方法としては、メモリ内のcanvas要素を作成するには、最初の画像を描画し、新しいキャンバスのコンテキストにgetImageDataを呼び出すことができます。..