JS-Snippet: Verifique a transparência da imagem das coordenadas pairadas

Apenas uma dica / snippet muito rápido para verificar se a posição atual do mouse sobre a imagem é transparente ou não.

A função

function isTransparent(e) {
        var x = e.pageX - this.offsetLeft,
            y = e.pageY - this.offsetTop;

        var canvas = document.getElementById('imgcheck-canvas') || (function(_this) { var e = document.createElement('canvas'); e.setAttribute('width',_this.width); e.setAttribute('height',_this.height); e.setAttribute('id',_this.id+'-canvas'); e.setAttribute('style','display:none;');document.body.appendChild(e);var cx=e.getContext('2d');cx.drawImage(_this,0,0,_this.width,_this.height); return e; })(this);
        if(canvas.getContext === undefined) { return false; }
        var ctx = canvas.getContext('2d');

        output.innerHTML = ((ctx.getImageData(x,y,1,1).data[3] == 0) ? true:false);
    }

Então, o que está acontecendo aí? Na verdade, é muito fácil, essa função é chamada onmousemove nas imagens. O script calcula a localização xe yna imagem atual, também subtraindo a posição de deslocamento do elemento pairado. Depois disso, ele verifica se esta imagem já foi pairada e se já criamos um canvaspara isso, caso contrário estamos criando e atribuindo uma nova canvasusando uma função anônima .

É basicamente isso. Agora só precisamos usar canvas.context.getImageData(x,y,w,h)para obter os valores rgba do ponto desejado. Os valores são atribuídos a uma matriz denominada data e sempre na seguinte ordem:

ImageData

data[0] // r 
data[1] // g 
data[2] // b
data[3] // alpha

Eles todos têm um valor de 0-255 , em que 0 não é visível e 255 é totalmente visível. Portanto, agora só temos que obter o quarto valor (índice 3) do array e verificar se é 0 para ter certeza de que o pixel em foco é transparente.

Exemplo

jsFiddle Demo