BlendImage Mask option is not working

[lovep34]

I am trying to use the BlendImage option with mask option, but I didn't see any clear documentation, can you please let me know how to use it.

Here I have used the BlendColor option and it is working fine. https://angular-fabric-blendimage.stackblitz.io

http://fabricjs.com/docs/fabric.Image.filters.fabric.Image.filter.BlendImage.html

[asturur]

http://fabricjs.com/image-filters

here blend image is used with multiply and mask, you can look that the code on the right of the page.

[anilthaku]

Hi @asturur ,

it is awesome library, it make my canvas more robust. you did a great job :)

I am also facing the same issue, I think you need to create separate demos for these, Also if possible, please update the documentation as well so it will be more clear to end user.

Currently I am checking the mask demo from the given link, but it is not working for me. http://fabricjs.com/image-filters

Thanks

[lovep34]

Hi @asturur ,

I can't make it work till now. according to @anilthaku it will be helpful if you can create seperate demos for each functionality.

Thanks for the help!

[DanKayeEvolveLab]

I'm running into the same issue, and there doesn't seem to be any documentation on the options for the BlendImage filter class in the standards fabric.js docs. Does anyone know where a working example and/or accurate docs can be found?

[asturur]

@DanKayeEvolveLab how does your filter and filter options looks like? what is not working?

[DanKayeEvolveLab]

@asturur here's my filter options, along with how I apply the filter. I've also attached the two images I'm using - the 'baseimage' I'm trying to mask, and the 'blurredMaskImage' I'm trying to mask it with.

const blendImageFilter: fabric.IBlendImageFilter = new fabric.Image.filters.BlendImage({ image: blurredMaskImage, mode: 'mask', alpha: 0.5, });

baseImage.filters.push(blendImageFilter); baseImage.applyFilters();

[DanKayeEvolveLab]

Looking into the docs further, the JSDocs for BlendImage seem like they may have been copied from the docs for BlendColor, and not updated. For example, in the screenshot below you'll notice docs for 'image' in BlendImage talk about color (not the image), and exactly match the text from the BlendColor 'color' property. Also, in the fabric.js filters example page, the BlendImage dropdown has only two modes - 'Multiply' and 'Mask', but the docs in the below screenshot show all of the same modes as BlendColor.

BlendImage JSDocs screenshot:

BlendColor JSDocs screenshot

It would be great to also know more about how the BlendImage 'image' object is used to mask the image the filter is applied to. For instance, what channel(s) are used from the 'image' in a BlendImage filter to determine if and how visible each channel and pixel of the image being filtered will be? Does it only work with Black and White masks? Or, does it only use the alpha-channel for masking? Is there a way to specify which channel(s) are used?

[DanKayeEvolveLab]

Looking into the code here, I was able to make the below assumptions, although I still haven't been able to get the mask to work in my code:

modes

'multiply' and 'mask' are the two available modes (all lower case, not Title Case as shown in the UI of the fabric.js filter demo )

mask channels

-I think The 'mask' mode only looks at the alpha channel of the BlendImage filter's 'image' property, and applies the same value to the base image's alpha channel.

[DanKayeEvolveLab]

Update - I was able to get the BlendImage filter working in 'mask' mode. My code investigations seem to be correct, the mask is based off ONLY the alpha channel, so I had to update my mask image to use the alpha channel instead of using a black & white image mask like is common in other image processing languages I've used in the past.

@asturur I made this PR (#9876), but wasn't 100% sure on some of the contribution guidelines. As these are just JSDoc updates, hopefully they can be included. I couldn't figure out how to add a reviewer to my PR, can you help me with that?

I guess, alternatively, we could update the 'mask' mode to also or instead work with b&w image masks, if that's something the fabric.js team would approve of? If so, I'd be happy to take a stab at that too.

Thanks,

[asturur]

Looks like the mask code is a bit rushed, the mask operation is a bit different in general, but yes blendImage was created from blendColor but wasn't really developed much.

[DanKayeEvolveLab]

Thanks @asturur for the explanation and for helping me update the docs in PR #9876 , hopefully this will help make the BlendImage usage clearer for future users.