Метод Javascript для обнаружения непрозрачной области PNG
Я ищу javascript метод обнаружения изображения в прозрачном PNG. Например, я создам PNG с прозрачным холстом 940x680, а затем помещу объект с полной непрозрачностью где-то в этом холсте.
Я хочу, чтобы можно было определить размер (ч / б), а также верхнее + левое расположение этого объекта, который не является прозрачным в пределах холста
Вот пример исходного изображения Вот пример того, чего я хотел бы достичь. (Наложение ограничительной рамки с данными о верхнем и левом полях)
Я нашел ресурс, который делает некоторые определения прозрачности, но я не уверен, как я масштабирую что-то вроде этого к тому, что я ищу.
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);
}