html - 如何在 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);

---

或者，您可以在内存中创建一个画布元素，绘制第一张图像，然后调用getImageData新的画布上下文。