Question

现在重新提出问题清楚。

我所拥有的是一个包含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并用每个vealues替换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

Answer 1

如果你想找到相对于图像的鼠标位置，你应该像这样使用click事件

$('[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];

})

无法捕获鼠标位置，因此无法捕获像素数据

1 个答案: