khlukekim / yellowstonestudio

0 stars 0 forks source link

detaching background and apply alpha fill for foreground #1

Closed khlukekim closed 7 years ago

khlukekim commented 7 years ago

Composition may help https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

danielrhim commented 7 years ago

Transparency Filter: https://www.w3schools.com/cssref/pr_background-color.asp

danielrhim commented 7 years ago

Opacity Filer: https://www.w3schools.com/css/css_image_transparency.asp

khlukekim commented 7 years ago

SVG filtering https://blogs.msdn.microsoft.com/ie/2011/10/14/svg-filter-effects-in-ie10/

khlukekim commented 7 years ago

done by b967c332bcb19eb676033d60019b1840ec462a81 call me genius

khlukekim commented 7 years ago

test it here: https://khlukekim.github.io/yellowstonestudio/sketch/testdetachedbg.html

due to the blend mode, the inner white dots in the bg will appear over the foreground image. this is inevitable, let's make the bg image somewhat darker and blurrier in the center.