Question

为了从特定的coördinate获取图像的颜色，我使用了这个答案get-pixel-color-from-canvas-on-mouseover。但是，在Microsoft的第56页的Powerpoint上，它说getImageData必须使用一次，因为来自图形卡的调用是密集的。他们给出了一个如何做到的例子，但它是用来分析整个画面的。

有没有办法只使用一次getImageData，然后只分析来自特定x和ycoördinate的数据，就像我说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);
}

Answer 1

很容易看到以下内容。

<强> Live Demo

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。< / p>

有可能getImageData一次并在特定地点之后提取数据吗？

1 个答案: