"mask-image" property does not work in Firefox. Is there any workaround?

Question

"mask-image" property does not work in Firefox. Is there any workaround?

Navigation

#1 by (2 votes)

2

I'm doing a project where I should apply a mask (PNG or SVG) over an image .

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 feature only works on Google Chrome.

Is there a workaround? I already looked for several and I did not find any that solved my problem.

html html5 css

asked by anonymous 05.10.2016 / 19:01

1 answer

RequireJS data-main does not work Access level and hierarchy when marking a checkboxes

score 2 · Answer 1

With PNG you can use canvas and it 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>