"Mask-image" property does not work in Firefox. Is there an alternative solution?

Asked

Viewed 61 times

2

I am doing a project where I should apply a mask (PNG or SVG) on an image < img >.

I’m using

.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%;
}

But this function only works in Google Chrome.

Is there an alternative solution? Because I have searched several and I have not found one that would solve my problem.

html css html5

  • Hello, Marcelo! Firefox has partial support for Mask-image. You need to put it online and only for SVG, it will not work for PNG.

  • http://caniuse.com/#feat=css-masks according to this site support is limited.

  • and according to the firefox developer itself is not supported https://developer.mozilla.org/en-US/docs/Web/CSS/mask

1 answer

2

with PNG gives to use canvas and works in 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>

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.