3

Estou realizando um projeto onde devo aplicar uma máscara(PNG ou SVG) sobre uma imagem < img >.

Estou utilizando

.svg-clipped {
    mask-image: url("../img/desktop_tds_hist.png") ;
    -webkit-mask-image: url("../img/desktop_tds_hist.png") ;
    -webkit-mask-image: url("../img/desktop_tds_hist.png");
    -o-mask-image: url("../img/desktop_tds_hist.png");
    -moz-mask-image: url("../img/desktop_tds_hist.png");
    -webkit-mask-size: 100% 100%;
}

Porém esta função só trabalha no Google Chrome.

Existe alguma solução alternativa? Pois já procurei diversas e não encontrei nenhuma que solucionasse meu problema.

3
  • Olá, Marcelo! O Firefox possui suporte parcial ao mask-image. Você precisa colocar ele in line e somente para SVG, não irá funcionar para PNG.
    – user55929
    Commented 11/10/2016 às 19:28
  • caniuse.com/#feat=css-masks de acordo com este site o suporte é limitado. Commented 11/10/2016 às 20:26
  • e de acordo com o próprio developer do firefox não é suportado developer.mozilla.org/en-US/docs/Web/CSS/mask Commented 11/10/2016 às 20:27

1 Resposta 1

2

com PNG dá para usar canvas e funciona no firefox.

<canvas id="my_canvas" width="500" height="313"></canvas>
<script>
    var canvas = document.getElementById("my_canvas");
    var context = canvas.getContext("2d");

    var image_url = 'http://bit.ly/2g6GVbN';
    var mask_url = 'http://bit.ly/2fcWFsQ';

    var image = loadImage(image_url);
    var mask = loadImage(mask_url);

    context.drawImage(mask, 0, 0);

    context.globalCompositeOperation = 'source-in';

    context.drawImage(image, 0, 0);

    function loadImage(imgfile) {
        var isFinished = false;
        var image = new Image();
        image.onload = function() {
            isFinished = true;
        }
        image.src = imgfile;

        while(!isFinished) {
            break;
        }
        return image;
    }
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .