是否可以一次获取图像数据并在特定位置之后提取数据？

从特定的coördinate图像获取颜色我已经使用这个答案get-pixel-color-from-canvas-on-mouseover。但是，从Microsoft发布的Powerpoint（第56页）中说，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); 
}

来源

2013-03-08 Martijn Hoogers

你能更详细请你....？ – 2013-03-08 11:42:49

是的，你可以使用getImageData一次，并可以分析它为特定的x和y n次，因为图像数据将被存储在一个数组变量，它不会被改变，直到你分配给该数组的其他值... – 2013-03-08 11:47:42

为了更加清晰，我编辑了我的问题。我希望它有帮助 – 2013-03-08 13:30:47

它很容易看到以下内容。

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了。

来源

2013-03-08 17:26:28 Loktar

谢谢，它的工作辉煌。它不仅可以工作，而且如果您阅读代码，它也会解释imageData的功能。大！ – 2013-03-11 09:35:57

是否可以一次获取图像数据并在特定位置之后提取数据？

回答

相关问题