查看透明图像并确定不透明度在X和Y坐标的开始和结束位置

Question

我的PNG图像有很多必须存在的空白区域。让我们说图像是1000 x 1000像素，它有一个100 x 100像素的黑色方块，位于450像素x 450像素，正好在中心（黑色方块可以是透明图像上的任何位置）。

现在，有没有办法加载大图像（1000x1000像素一个）并搜索找到中间黑色方块的X和Y位置？

这应该是跨浏览器兼容的，或者至少与主浏览器兼容。

此处的示例：http://jsfiddle.net/cwolves/GaEeG/2/显示了如何查看鼠标是否在图像的透明部分上。问题是，我不确定如何使用代码扫描以获得透明度不透明度从图像的X和Y侧开始的位置。它似乎也仅适用于Chrome。

var imgData,
     width = 200,
    height = 200;

$('#mask').bind('mousemove', function(ev){
    if(!imgData){ initCanvas(); }
    var imgPos = $(this).offset(),
      mousePos = {x : ev.pageX - imgPos.left, y : ev.pageY - imgPos.top},
      pixelPos = 4*(mousePos.x + height*mousePos.y),
         alpha = imgData.data[pixelPos+3];

    $('#opacity').text('Opacity = ' + ((100*alpha/255) << 0) + '%');
});

function initCanvas(){
    var canvas = $('<canvas width="'+width+'" height="'+height+'" />')[0],
           ctx = canvas.getContext('2d');

    ctx.drawImage($('#mask')[0], 0, 0);
    imgData = ctx.getImageData(0, 0, width, height);
}

我只能使用PHP或JavaScript /插件来执行此操作。

我希望有办法做到这一点。感谢。