1- /* globals Seriously i18n */
1+ /* globals MarvinColorModelConverter AlphaBoundary MarvinImage i18n Seriously */
22/* exported setBackgroundImage */
33let mainImage ;
44let mainImageWidth ;
@@ -10,36 +10,110 @@ let target;
1010let chroma ;
1111let seriouslyimage ;
1212
13+ function greenToTransparency ( imageIn , imageOut ) {
14+ for ( let y = 0 ; y < imageIn . getHeight ( ) ; y ++ ) {
15+ for ( let x = 0 ; x < imageIn . getWidth ( ) ; x ++ ) {
16+ const color = imageIn . getIntColor ( x , y ) ;
17+ const hsv = MarvinColorModelConverter . rgbToHsv ( [ color ] ) ;
18+
19+ if ( hsv [ 0 ] >= 60 && hsv [ 0 ] <= 200 && hsv [ 1 ] >= 0.2 && hsv [ 2 ] >= 0.2 ) {
20+ imageOut . setIntColor ( x , y , 0 , 127 , 127 , 127 ) ;
21+ } else {
22+ imageOut . setIntColor ( x , y , color ) ;
23+ }
24+ }
25+ }
26+ }
27+
28+ function reduceGreen ( image ) {
29+ for ( let y = 0 ; y < image . getHeight ( ) ; y ++ ) {
30+ for ( let x = 0 ; x < image . getWidth ( ) ; x ++ ) {
31+ const r = image . getIntComponent0 ( x , y ) ;
32+ const g = image . getIntComponent1 ( x , y ) ;
33+ const b = image . getIntComponent2 ( x , y ) ;
34+ const color = image . getIntColor ( x , y ) ;
35+ const hsv = MarvinColorModelConverter . rgbToHsv ( [ color ] ) ;
36+
37+ if ( hsv [ 0 ] >= 60 && hsv [ 0 ] <= 130 && hsv [ 1 ] >= 0.15 && hsv [ 2 ] >= 0.15 ) {
38+ if ( r * b != 0 && ( g * g ) / ( r * b ) > 1.5 ) {
39+ image . setIntColor ( x , y , 255 , r * 1.4 , g , b * 1.4 ) ;
40+ } else {
41+ image . setIntColor ( x , y , 255 , r * 1.2 , g , b * 1.2 ) ;
42+ }
43+ }
44+ }
45+ }
46+ }
47+
48+ function alphaBoundary ( imageOut , radius ) {
49+ const ab = new AlphaBoundary ( ) ;
50+ for ( let y = 0 ; y < imageOut . getHeight ( ) ; y ++ ) {
51+ for ( let x = 0 ; x < imageOut . getWidth ( ) ; x ++ ) {
52+ ab . alphaRadius ( imageOut , x , y , radius ) ;
53+ }
54+ }
55+ }
56+
1357function setMainImage ( imgSrc ) {
14- const image = new Image ( ) ;
15- image . src = imgSrc ;
16- mainImageWidth = image . width ;
17- mainImageHeight = image . height ;
18-
19- // create tmpcanvas and size it to image size
20- const tmpCanvas = document . createElement ( 'canvas' ) ;
21- tmpCanvas . width = mainImageWidth ;
22- tmpCanvas . height = mainImageHeight ;
23- tmpCanvas . id = 'tmpimageout' ;
24-
25- // append Canvas for Seriously to chromakey the image
26- // eslint-disable-next-line no-unused-vars
27- const body = document . getElementsByTagName ( 'body' ) [ 0 ] ;
28- document . body . appendChild ( tmpCanvas ) ;
29-
30- seriously = new Seriously ( ) ;
31- target = seriously . target ( '#tmpimageout' ) ;
32- seriouslyimage = seriously . source ( image ) ;
33- chroma = seriously . effect ( 'chroma' ) ;
34- chroma . source = seriouslyimage ;
35- target . source = chroma ;
36- seriously . go ( ) ;
37- mainImage = new Image ( ) ;
38- mainImage . src = tmpCanvas . toDataURL ( 'image/png' ) ;
39-
40- mainImage . onload = function ( ) {
41- drawCanvas ( ) ;
42- } ;
58+ if ( config . chroma_keying_variant === 'marvinj' ) {
59+ const image = new MarvinImage ( ) ;
60+ image . load ( imgSrc , function ( ) {
61+ mainImageWidth = image . getWidth ( ) ;
62+ mainImageHeight = image . getHeight ( ) ;
63+
64+ const imageOut = new MarvinImage ( image . getWidth ( ) , image . getHeight ( ) ) ;
65+
66+ //1. Convert green to transparency
67+ greenToTransparency ( image , imageOut ) ;
68+
69+ // 2. Reduce remaining green pixels
70+ reduceGreen ( imageOut ) ;
71+
72+ // 3. Apply alpha to the boundary
73+ alphaBoundary ( imageOut , 6 ) ;
74+
75+ const tmpCanvas = document . createElement ( 'canvas' ) ;
76+ tmpCanvas . width = mainImageWidth ;
77+ tmpCanvas . height = mainImageHeight ;
78+ imageOut . draw ( tmpCanvas ) ;
79+
80+ mainImage = new Image ( ) ;
81+ mainImage . src = tmpCanvas . toDataURL ( 'image/png' ) ;
82+ mainImage . onload = function ( ) {
83+ drawCanvas ( ) ;
84+ } ;
85+ } ) ;
86+ } else {
87+ const image = new Image ( ) ;
88+ image . src = imgSrc ;
89+ mainImageWidth = image . width ;
90+ mainImageHeight = image . height ;
91+
92+ // create tmpcanvas and size it to image size
93+ const tmpCanvas = document . createElement ( 'canvas' ) ;
94+ tmpCanvas . width = mainImageWidth ;
95+ tmpCanvas . height = mainImageHeight ;
96+ tmpCanvas . id = 'tmpimageout' ;
97+
98+ // append Canvas for Seriously to chromakey the image
99+ // eslint-disable-next-line no-unused-vars
100+ const body = document . getElementsByTagName ( 'body' ) [ 0 ] ;
101+ document . body . appendChild ( tmpCanvas ) ;
102+
103+ seriously = new Seriously ( ) ;
104+ target = seriously . target ( '#tmpimageout' ) ;
105+ seriouslyimage = seriously . source ( image ) ;
106+ chroma = seriously . effect ( 'chroma' ) ;
107+ chroma . source = seriouslyimage ;
108+ target . source = chroma ;
109+ seriously . go ( ) ;
110+ mainImage = new Image ( ) ;
111+ mainImage . src = tmpCanvas . toDataURL ( 'image/png' ) ;
112+
113+ mainImage . onload = function ( ) {
114+ drawCanvas ( ) ;
115+ } ;
116+ }
43117}
44118
45119// eslint-disable-next-line no-unused-vars
@@ -79,8 +153,12 @@ function drawCanvas() {
79153 }
80154
81155 if ( typeof mainImage !== 'undefined' && mainImage !== null ) {
82- //important to fetch tmpimageout
83- ctx . drawImage ( document . getElementById ( 'tmpimageout' ) , 0 , 0 ) ;
156+ if ( config . chroma_keying_variant === 'marvinj' ) {
157+ ctx . drawImage ( mainImage , 0 , 0 ) ;
158+ } else {
159+ //important to fetch tmpimageout
160+ ctx . drawImage ( document . getElementById ( 'tmpimageout' ) , 0 , 0 ) ;
161+ }
84162 }
85163}
86164
0 commit comments