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对象并使用它来执行子选择，但直接从初始canvas元素中提取数据。

像

这样的东西

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。

如何在HTML5画布中使用getImageData获取子图像的子图像

1 个答案: