mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-12-22 15:25:48 +01:00
Code Activity

Improve background blur blending.

Browse source 
We used blur the image then mask, which caused a halo around
the foreground.  We now mask then blur.
This commit is contained in:
Juliusz Chroboczek 2024-12-14 02:13:59 +01:00
parent 4852f4d379
commit 2c72a27453
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static/galene.js
View file

@ -1283,12 +1283,21 @@ let filters = {
ctx.canvas.height = src.videoHeight; ctx.canvas.height = src.videoHeight;
} }
// set the alpha mask, background is opaque
ctx.globalCompositeOperation = 'copy'; ctx.globalCompositeOperation = 'copy';
ctx.filter = `blur(${src.videoWidth / 256}px)`; ctx.filter = 'none';
ctx.drawImage(mask, 0, 0); ctx.drawImage(mask, 0, 0);
// rather than blurring the original image, we first mask
// the background then blur, this avoids a halo effect
ctx.globalCompositeOperation = 'source-in'; ctx.globalCompositeOperation = 'source-in';
ctx.filter = `blur(${src.videoWidth / 48}px)`; ctx.filter = 'none';
ctx.drawImage(result.bitmap, 0, 0); ctx.drawImage(result.bitmap, 0, 0);
ctx.globalCompositeOperation = 'copy';
ctx.filter = `blur(${src.videoWidth / 48}px)`;
ctx.drawImage(ctx.canvas, 0, 0);
// now draw the foreground
ctx.globalCompositeOperation = 'destination-atop'; ctx.globalCompositeOperation = 'destination-atop';
ctx.filter = 'none'; ctx.filter = 'none';
ctx.drawImage(result.bitmap, 0, 0); ctx.drawImage(result.bitmap, 0, 0);