mix-blend-mode not rendered

[Cristian-L]

I am trying to use mix-blend-mode on some of the divs to get some nice effects. However, html2canvas does not render it at all. Any suggestions or workarounds, please?

[brcontainer]

Please read this:

https://github.com/niklasvh/html2canvas#browser-compatibility

As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

I hope it is possible to implement this in the near future :)

[jackuro]

hi cristian have the same issue, did you found any solution?

[brcontainer]

@jackuro see https://github.com/niklasvh/html2canvas#browser-compatibility ;)

[jackuro]

i see it already looks like the render does the image solid forgetin the css mix-blend-mode how can i fix that? its not a browser problem, thank you @brcontainer @niklasvh

[brcontainer]

@jackuro There is no way to fix something that has not been implemented. I really think there is a lack of collaboration in the project, there are many "forks", but few "pullrequests" that are useful. :(

[egfx]

I really wonder if mix-blend-mode is possible. It would be a very welcome addition. Any hints on where to start the implementation?

[MatthijsMud]

CanvasRenderingContext2D has a property that could possibly be used for the desired effect: globalCompositeOperation. All allowed values for mix-blend-mode are valid values for the given property.

Setting the property when the browser doesn't support it, should be no different from the current implementation. In that regard it has a nice fallback. So I expect something akin to the following is all that is needed to implement the feature.

var temp = ctx.globalCompositeOperation;
ctx.globalCompositeOperation = window.getComputedStyle(node).mixBlendMode;

// ...

ctx.globalCompositeOperation = temp;

As to where this piece of code needs to be placed... I have little to no idea, given I'm not all that well versed in the project (yet). It should be before the element and its children are rendered, at which point more properties are likely to be set.

Another issue, pertaining background-blend-mode, can probably be solved in a similar way; the moment the context is restored differs.

[jechazelle]

Hi,
Do you have any news about mix-blend-mode support please or how can I use it please ?

[brcontainer]

@jechazelle Hi. If you are using the latest version of html2canvas and it still does not support a specific CSS property is because it has not yet been implemented, all CSS properties will probably have priority, but every day a new property or functionality appears and you have to understand that you do not plan a one, develops what is possible within the necessary time.

What annoys me is seeing so many forks without collaboration, just used as useless backups (since forks do not go with versioning on github-web, only if you use a webhook to force this, but most do not even really know how webhooks work, so probably the forks are even just for outdates backups).

The only solution is to go testing and if you have experience with this and want to collaborate with the project (fork or pull-request), it would be very helpful because there are many features and more people working better.

See https://github.com/niklasvh/html2canvas#browser-compatibility:

As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

[TheSevDev]

I have a quick and dirty solution to change the mix-blend-mode. In my case I used overlapping images with mix-blend-mode: multiply. Simply insert the code below at line 6157:
this.ctx.globalCompositeOperation = 'multiply';

It's hardcoded and changes the blend-mode for all elements inside the canvas though...
Kudos to @MatthijsMud

[TheSevDev]

I managed to add some further mix-blend-mode functionality. It's still quick and dirty but at least it's now possible to have different blend modes for different elements. The mix-blend-mode «multiply» seems to work fine for images and text – others such as «exclusion» lead to unexpected results. Below are the code snippets I've added:

This is not a proper solution at all – but maybe it helps someone in the meantime.
Code Snippets:

var mixBlendMode = { name: 'mix-blend-mode', initialValue: 'normal', prefix: false, type: PropertyDescriptorParsingType.IDENT_VALUE, parse: function (mixBlendMode) { return mixBlendMode } };

this.mixBlendMode = parse(mixBlendMode, declaration.mixBlendMode);

_this.ctx.globalCompositeOperation = styles.mixBlendMode;

this.ctx.globalCompositeOperation = container.styles.mixBlendMode;

[tayfunerbilen]

I managed to add some further mix-blend-mode functionality. It's still quick and dirty but at least it's now possible to have different blend modes for different elements. The mix-blend-mode «multiply» seems to work fine for images and text – others such as «exclusion» lead to unexpected results. Below are the code snippets I've added:

This is not a proper solution at all – but maybe it helps someone in the meantime.
Code Snippets:

var mixBlendMode = { name: 'mix-blend-mode', initialValue: 'normal', prefix: false, type: PropertyDescriptorParsingType.IDENT_VALUE, parse: function (mixBlendMode) { return mixBlendMode } };

this.mixBlendMode = parse(mixBlendMode, declaration.mixBlendMode);

_this.ctx.globalCompositeOperation = styles.mixBlendMode;

this.ctx.globalCompositeOperation = container.styles.mixBlendMode;

I tried your solution but still not working, any suggestion?

[TheSevDev]

@tayfunerbilen Please try again by using the same modified library file as I use: html2canvas-with-mix-blend-mode.js.zip
I created a simple CodePen: https://codepen.io/SevKel/pen/ZEOLPEg

[ArtemisGraphic]

@TheSevDev I tried implementing this features in the last 1.3.2 version with some adjustment but it does not work. The compiled version you provided is 1.0 rc5 and does not seems to work on mobile. Is there any way to implement mix blend mode in the last version?

[TheSevDev]

@ArtemisGraphic I haven't tried it with the newest version. My version seems to work fine on mobile. The codepen renders correctly on my iOS device: https://codepen.io/SevKel/pen/ZEOLPEg

[ArtemisGraphic]

@TheSevDev I'm using the mix-blend-mode build but on mobile it only renders a white file, while on desktop it works. I tried changing with the non modified version but every version before 1.2 just renders an empty image.
I then tried to add the mod to 1.2 (which works for me on mobile) and I made some adjustement changing

this.mixBlendMode = parse(mixBlendMode, declaration.mixBlendMode);

to

this.mixBlendMode = parse(context, mixBlendMode, declaration.mixBlendMode);

I get no errors in the console but the mix-blend-mode is just not rendered. Can you help me?

[TheSevDev]

@ArtemisGraphic Maybe the object that you try to render is out of view (below the fold) on mobile devices. I remember having an issue like that before. I fixed it by cloning the div that I wanted to convert and placed it at the top left using position fixed. You can hide the cloned div using z-index.

[ArtemisGraphic]

@TheSevDev I think is a problem coming from canvas size, < 1.2 versions only renders what's visible while each 1.2+ renders the canvas correctly regardless of the device. I can render something acceptable with y: window.pageYOffset, but still desktop and mobile renders are not equal and can't find a solution that works for both. If we could port the mix-blend mode (even as it is) to a 1.2+ version it would be awesome. Unfortunately I can't find what makes it work on 1.0 and not on 1.2+

[TheSevDev]

@ArtemisGraphic I don't know this library very well. I just tried different things until it luckily worked. You could go through the differences between the two library versions using a website like https://codebeautify.org/file-diff. Sorry, but I can't assist you with that.

[glwhappen]

npm i html2canvas-add-mix-blend-mode

[hakanocal]

Just add this
<script src="https://cdn.jsdelivr.net/npm/html2canvas-add-mix-blend-mode@1.4.1/dist/html2canvas.min.js"></script>