Ich bin auf der Suche nach einer JavaScript-Methode zum Erkennen eines Bildes in einem transparenten PNG. Zum Beispiel werde ich ein PNG mit einer transparenten Leinwand von 940x680 erstellen und dann irgendwo innerhalb dieser Leinwand ein Objekt mit voller Deckkraft platzieren.

Ich möchte in der Lage sein, die Größe (h / w) und die obere + linke Position des Objekts zu erkennen, das innerhalb der Zeichenfläche nicht transparent ist

Hier ist ein Beispiel für das Originalbild Hier ist ein Beispiel dafür, was ich erreichen möchte. (Begrenzungsrahmenüberlagerung mit Daten für oberen und linken Rand)

Ich habe eine Ressource gefunden, die Transparenz erkennt, aber ich bin nicht sicher, wie ich so etwas auf das skaliere, wonach ich suche.

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);
}

Geige