Working with webp file formats just like jpg gif png but newer document body style minHeight 600px const img new Image Create new img element img addEventListener load console log img loaded img width x img height const canvas document createElement canvas canvas width img width canvas height img height document body appendChild canvas const ctx canvas getContext 2d ctx drawImage img 0 0 canvas style width 100 false img src https notebook xbdev net var images chinesecharacters webp Set source path Working with webp file formats just like jpg gif png but newer document body style minHeight 1100px const img new Image Create new img element img addEventListener load console log img loaded img width x img height const canvas document createElement canvas canvas width img width canvas height img height document body appendChild canvas const ctx canvas getContext 2d drawImage image sx sy sWidth sHeight dx dy dWidth dHeight ctx drawImage img 0 0 canvas style width 100 let count 0 for let x 0 x 10 x for let y 0 y 10 y getRect ctx 21 x 167 212 y 200 158 184 count false function getRect ctx x y w h count ctx strokeStyle red ctx lineWidth 2 ctx beginPath ctx moveTo x y ctx lineTo x w y ctx lineTo x w y h ctx lineTo x y h ctx lineTo x y ctx stroke if count 0 get image data let imgData ctx getImageData x y x w y h console log imgData imgData width imgData data length for let i 0 i imgData data length i 4 let c r imgData data i 0 g imgData data i 1 b imgData data i 2 a imgData data i 3 if c r 220 imgData data i 0 255 imgData data i 1 255 imgData data i 2 255 imgData data i 3 0 var canvas2 document createElement canvas document body appendChild canvas2 var ctx2 canvas2 getContext 2d canvas2 style position absolute canvas2 style left 300px canvas2 style top 200px canvas2 style width 500px canvas2 style border 2px solid green canvas2 width w canvas2 height h ctx2 putImageData imgData 0 0 img src https notebook xbdev net var images chinesecharacters webp style tile hover border 2px solid red style script Working with webp file formats just like jpg gif png but newer document body style minHeight 1100px let container document createElement div document body appendChild container container style position relative const img new Image Create new img element img addEventListener load console log img loaded img width x img height const canvas document createElement canvas canvas id canvas canvas width img width canvas height img height container appendChild canvas const ctx canvas getContext 2d canvas style position relative drawImage image sx sy sWidth sHeight dx dy dWidth dHeight ctx drawImage img 0 0 canvas style width 100 let count 0 for let x 0 x 10 x for let y 0 y 10 y getRect ctx 21 x 167 212 y 200 158 184 count canvas style display none false function getRect ctx x y w h count ctx strokeStyle red ctx lineWidth 2 ctx beginPath ctx moveTo x y ctx lineTo x w y ctx lineTo x w y h ctx lineTo x y h ctx lineTo x y ctx stroke let div document createElement div div className tile div style position absolute div style left x px div style top y px div style width w px div style height h px div style border 7px solid yellow div style box sizing border box container appendChild div if count 0 get image data let imgData ctx getImageData x y x w y h console log imgData imgData width imgData data length for let i 0 i imgData data length i 4 let c r imgData data i 0 g imgData data i 1 b imgData data i 2 a imgData data i 3 if c r 220 imgData data i 0 255 imgData data i 1 255 imgData data i 2 255 imgData data i 3 0 var canvas2 document createElement canvas div appendChild canvas2 var ctx2 canvas2 getContext 2d canvas2 style position absolute canvas2 style left 0px canvas2 style top 0px canvas2 style width 100 canvas2 style border 0px solid green canvas2 width w canvas2 height h canvas2 style pointer events none ctx2 putImageData imgData 0 0 img src https notebook xbdev net var images chinesecharacters webp script
2px solid red style script Working with webp file formats just like jpg gif png but newer document body style minHeight 1100px let container document createElement div document body appendChild container container style position relative const img new Image Create new img element img addEventListener load console log img loaded img width x img height const canvas document createElement canvas canvas id canvas canvas width img width canvas height img height container appendChild canvas const ctx canvas getContext 2d canvas style position relative drawImage image sx sy sWidth sHeight dx dy dWidth dHeight ctx drawImage img 0 0 canvas style width 100 let count 0 for let x 0 x 10 x for let y 0 y 10 y getRect ctx 21 x 167 212 y 200 158 184 count canvas style display none false function getRect ctx x y w h count ctx strokeStyle red ctx lineWidth 2 ctx beginPath ctx moveTo x y ctx lineTo x w y ctx lineTo x w y h ctx lineTo x y h ctx lineTo x y ctx stroke let div document createElement div div className tile div style position absolute div style left x px div style top y px div style width w px div style height h px div style border 7px solid yellow div style box sizing border box container appendChild div if count 0 get image data let imgData ctx getImageData x y x w y h console log imgData imgData width imgData data length for let i 0 i imgData data length i 4 let c r imgData data i 0 g imgData data i 1 b imgData data i 2 a imgData data i 3 if c r 220 imgData data i 0 255 imgData data i 1 255 imgData data i 2 255 imgData data i 3 0 var canvas2 document createElement canvas div appendChild canvas2 var ctx2 canvas2 getContext 2d canvas2 style position absolute canvas2 style left 0px canvas2 style top 0px canvas2 style width 100 canvas2 style border 0px solid green canvas2 width w canvas2 height h canvas2 style pointer events none ctx2 putImageData imgData 0 0 img src https notebook xbdev net var images chinesecharacters webp script