1

为了从特定坐标的图像中获取颜色，我使用了这个答案get-pixel-color-from-canvas-on-mouseover。但是，在 Microsoft 第 56 页的Powerpoint上，它说 getImageData 必须使用一次，因为来自显卡的调用非常密集。他们举了一个例子如何做到这一点，但它是为了分析整个画面而制作的。

有没有办法只使用一次 getImageData，然后只分析来自特定 x 和 y 坐标的数据，就像我说的 5 个随机位置一样？

编辑：为了检查每个像素的例子：

var imageData = ctx.getImageData(0, 0, width, height);
var inputData = imageData.data;

for(var y = 0; y < height; y++) {
    for (car x = 0; x <width; x++) {
       var r = inputData[i+0];
var g = inputData[i+1];
var b = inputData[i+2];

但我想要的是它确实像下面一样，但是在外面有 imageData：我怎样才能读取包含我想要的位置的数组？因为括号里的数字是颜色值类型（r,g,b）

for (var i=0; i<slider; i++)
{
    var objectx = position.getX();
    var objecty = position.getY();
    var imageData = context.getImageData(objectx, objecty, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
}
4

1 回答 1

2

很容易看到以下内容。

现场演示

var imageData = ctx.getImageData(0, 0, width, height);
var inputData = imageData.data; 

var pData = (~~objectx + (~~objecty * width)) * 4;
var r = inputData[pData],
    g = inputData[pData + 1],
    b = inputData[pData + 2],
    a = inputData[pData + 3];

~~只是一种更快的方法Math.floor。其余的应该是非常不言自明的。只需更改objectx, 并更改objecty为您需要的任何值并继续检查inputData，只要图像没有更改，就无需getImageData再次更改。

于 2013-03-08T17:26:28.957 回答