0

質問をより明確に再投稿します。

私が持っているのは、x個の画像があるページです。私がやりたいのは、画像の任意の部分をクリックして、クリックした画像の特定の色を透明にすることです。Turning its Alpha to 0

だから、画像：

<div id="resizeImg" style="width:300px; left:50px;" class="pic">
    <img id="image" src="http://myurl.com/images/3727.jpg" width=300 />
</div>
<div id="resizeImg" style="width:300px; left:50px;" class="pic">
    <img id="image1" src="http://myurl.com/images/3728.jpg" width=300 />
</div>
<div id="resizeImg" style="width:300px; left:50px;" class="pic">
    <img id="image2" src="http://myurl.com/images/3729.jpg" width=300 />
</div>

以下は私が試していることです、検査官は私に言いますImageData { width=300, height=300, data=Uint8ClampedArray}

そこにあるものを確認するためにクリックdata=Uint8ClampedArrayすると、ブラウザ (ff) がフリーズし、スクリプトを停止するかどうか尋ねられます。

そのため、ループに巻き込まれ、data=Uint8ClampedArray it shows 0=255, 1=255, 2=255赤いものをクリックしても最終的に表示されます。

問題は、マウスの位置とクリックされたピクセルのキャプチャにあると思います。

// get mouse position

function findPos(obj) {
    var current_left = 0,
        current_top = 0;
    if (obj.offsetParent) {
        do {
            current_left += obj.offsetLeft;
            current_top += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return {
            x: current_left,
            y: current_top
        };
    }
    return undefined;
}

// click
$('[id^=image]').click(function (e) {
    var after = $(this)[0];
    after.src = white2transparent(after);
})

function white2transparent(img) {
    var c = document.createElement('canvas');
    var w = img.width,
        h = img.height;

    c.width = w;
    c.height = h;

    // get the position
    var position = findPos(img);
    var x = img.pageX - position.x;
    var y = img.pageY - position.y;
    var coordinate = "x=" + x + ", y=" + y;

    var ctx = c.getContext('2d');

    ctx.width = w;
    ctx.height = h;
    ctx.drawImage(img, 0, 0, w, h);
    var imageData = ctx.getImageData(0, 0, w, h);

    // show rgb colors in inspector
    console.log(imageData);

    var pixel = imageData.data;

    var r = 0,
        g = 1,
        b = 2,
        a = 3;
    for (var p = 0; p < pixel.length; p += 4) {
        if (
        // this is where I need to return the RGB found and replace 220
        pixel[p + r] >= 220 &&
            pixel[p + g] >= 220 &&
            pixel[p + b] >= 220) {
            pixel[p + a] = 0;
        }
    }

    ctx.putImageData(imageData, 0, 0);

    return c.toDataURL('image/png');
}

このセクションでは、clickde ピクセルの RGB を返し、220 を各値に置き換える必要があります。

if (
    // this is where I need to return the RGB found and replace 220
      pixel[p+r] >= 220 &&
      pixel[p+g] >= 220 &&
      pixel[p+b] >= 220)

編集

次を使用してインスペクターで座標を表示しようとすると:

// show x + y
console.log("x=" + x + ", y=" + y);

戻るx=NaN, y=NaN

4

1 に答える 1

0

画像に対するマウスの相対的な位置を見つけたい場合は、次のようにクリックイベント自体を使用する必要があります

$('[id^=image]').click(function (e) {
   // an array representing the relative x\y mouse coordinates within the image
   var relativeMousePosition=[e.pageX-$(this).offset().left,e.pageY-$(this).offset().top];

})
于 2013-03-29T13:50:01.800 に答える