Mask Image based on another image

Question

I have urls of two images(png). I need to load them and mask one image based on another. I am using fabricjs library. But I am unable to achieve the desired result so far. My question is that Is it doable using fabricjs? If yes, please point me in the right direction and give some hint.

Thanks.

Khawer Zeshan · Accepted Answer

I don't think it is possible to use image as a mask in fabricjs. However it is possible to use SVG as a mask either from SVG String or SVG URL. Here is an example to use SVG as a mask using SVG string.

$(document).ready(function () {
    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
});

var canvas = new fabric.Canvas('myCanvas');

var group = [];

fabric.loadSVGFromString('',function(objects,options) {
    var loadedObjects = new fabric.Group(group);
    loadedObjects.set({
        scaleX:0.5,
        scaleY:0.5,
        lockMovementX : true,
        lockMovementY : true,
        lockScalingX : true,
        lockScalingY : true,
        lockUniScaling : true,
        lockRotation : true,
        selectable: false,
        hasRotatingPoint:false,
        hasControls: false,
        hasBorders: false
    });

    canvas.add(loadedObjects).centerObject(loadedObjects).renderAll();
},function(item, object) {
    object.set('id',item.getAttribute('id'));
    group.push(object);
});

function handleImage(e) {
    var reader = new FileReader();
    //comment out the below code if you want to remove the previous uploaded image
    /*if(canvas.item(1)){
        canvas.remove(canvas.item(1))
    }*/
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            var imgInstance = new fabric.Image(img, {
                width:200,
                height:200,
                lockMovementX : false,
                lockMovementY : false,
                lockScalingX : false,
                lockScalingY : false,
                lockUniScaling : false,
                lockRotation : false,
                selectable: true,
                hasRotatingPoint:true,
                borderColor: 'red',
                cornerColor: 'green',
                hasControls: true,
                hasBorders: true,
                transparentCorners: false
            });

            canvas.add(imgInstance).centerObject(imgInstance).renderAll();
            canvas.setActiveObject(canvas.item(1));

            var shape = canvas.item(0);
            canvas.clipTo = function(ctx) {
                shape.render(ctx);
            };

            canvas.controlsAboveOverlay = true;
            canvas.renderAll();
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
}

There is also one limitation for SVG. If SVG has multiple paths it will only mask the last path. I couldn't find the solution to make it work for all paths of SVG.

FIDDLE

Mask Image based on another image

Answers (1)

Related Questions