如何在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 ..