1

特定の座標で画像から色を取得するために、この回答get-pixel-color-from-canvas-on-mouseover を使用しました。ただし、Microsoft の 56 ページのPowerpointでは、グラフィック カードからの呼び出しが集中するため、getImageData を 1 回使用する必要があると記載されています。彼らはそれを行う方法の例を示しましたが、全体像を分析するために作られています。

getImageData を一度だけ使用して、特定の x 座標と y 座標からのデータのみを分析する方法はありますか?

編集：各ピクセルをチェックするために、例は次のことを行います：

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 に答える