var script document createElement script script type text javascript script src https docs opencv org master opencv js document head appendChild script window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key onload var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script let imgurl https notebook xbdev net var images pieces jpg let canvas document createElement canvas canvas width 100 canvas height 100 document body appendChild canvas window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key cv onRuntimeInitialized let img document createElement img document body appendChild img img src imgurl img onload function console log img loaded console log img let cvimg cv imread img console log cvimg cv imshow canvas cvimg cvimg delete onload var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script let imgurl https notebook xbdev net var images pieces jpg document body style height 200pt let canvas document createElement canvas canvas width 100 canvas height 100 document body appendChild canvas window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key cv onRuntimeInitialized let img document createElement img document body appendChild img img src imgurl img onload function console log img loaded let src cv imread img let dst new cv Mat let ksize new cv Size 5 5 cv GaussianBlur src dst ksize 0 0 cv BORDER DEFAULT cv imshow canvas dst dst delete src delete onload onload var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script let imgurl https notebook xbdev net var images pieces jpg document body style height 400pt window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key cv onRuntimeInitialized let img document createElement img img src imgurl img onload function console log img loaded let src cv imread img let sen 5 9 15 21 29 41 create a range of images with different blur values for let ss 0 ss sen length ss let canvas document createElement canvas canvas width 50 canvas height 50 document body appendChild canvas let dst new cv Mat let ksize new cv Size sen ss sen ss cv GaussianBlur src dst ksize 0 0 cv BORDER DEFAULT cv imshow canvas dst dst delete end for s src delete onload onload var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script let imgurl https notebook xbdev net var images pieces jpg document body style height 200pt let canvas document createElement canvas canvas width 100 canvas height 100 document body appendChild canvas window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key cv onRuntimeInitialized let img document createElement img document body appendChild img img src imgurl img onload function console log img loaded let src cv imread img let dst new cv Mat let ksize new cv Size 5 5 cv cvtColor src dst cv COLOR RGBA2GRAY cv imshow canvas dst dst delete src delete onload onload var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script let imgurl https notebook xbdev net var images pieces jpg document body style height 200pt let canvas document createElement canvas canvas width 100 canvas height 100 document body appendChild canvas window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key cv onRuntimeInitialized let img document createElement img document body appendChild img img src imgurl img onload function console log img loaded try let src cv imread img let img copy src clone let img gray new cv Mat cv cvtColor src img gray cv COLOR RGB2GRAY let img blur new cv Mat cv medianBlur img gray img blur 7 let img edge new cv Mat cv adaptiveThreshold img blur img edge 255 cv ADAPTIVE THRESH MEAN C cv THRESH BINARY blockSize 9 C 2 let img cartoon new cv Mat let mask new cv Mat let maskInv new cv Mat cv cvtColor img copy mask cv COLOR RGBA2GRAY 0 cv threshold mask img copy 100 255 cv THRESH BINARY cv bitwise not mask maskInv Black out the area of logo in ROI cv bitwise and img copy img copy img cartoon img edge Converting to RGB from GrayScale cv cvtColor img edge img edge cv COLOR GRAY2RGB let img cartoon new cv Mat let img cartoon src clone cv bitwise and img copy img copy img cartoon img edge cv imshow canvas img cartoon dst delete src delete catch e console log e onload onload var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script let imgurl https notebook xbdev net var images pieces jpg document body style height 200pt let canvas document createElement canvas canvas width 200 canvas height 200 canvas id canvasout document body appendChild canvas window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key cv onRuntimeInitialized let img document createElement img document body appendChild img img src imgurl img onload function console log img loaded let src cv imread img let dst new cv Mat You can try more different parameters let rect new cv Rect 50 50 100 100 dst src roi rect cv imshow canvas dst dst delete src delete onload onload let imgurl1 https notebook xbdev net var images pieces jpg let imgurl2 https notebook xbdev net var images crownsmall png var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script document body style height 200pt let count 0 let img1 0 let img2 0 let canvas document createElement canvas canvas width 500 canvas height 500 canvas id canvasout document body appendChild canvas window onload function console log script loaded cv onRuntimeInitialized img1 document createElement img img1 src imgurl1 img2 document createElement img img2 src imgurl2 img1 onload function console log img 1 loaded count doCV img2 onload function console log img 2 loaded count doCV onRuntimeInitialized window onload function doCV if count 2 return console log doCV let src cv imread img1 let logo cv imread img2 let dst new cv Mat let roi new cv Mat let mask new cv Mat let maskInv new cv Mat let imgBg new cv Mat let imgFg new cv Mat let sum new cv Mat let rect new cv Rect 0 0 logo cols logo rows console log logo cols logo rows console log src cols src rows I want to put logo on top left corner So I create a ROI roi src roi rect Create a mask of logo and create its inverse mask also cv cvtColor logo mask cv COLOR RGBA2GRAY 0 cv threshold mask mask 100 255 cv THRESH BINARY cv bitwise not mask maskInv Black out the area of logo in ROI cv bitwise and roi roi imgBg maskInv Take only region of logo from logo image cv bitwise and logo logo imgFg mask Put logo in ROI and modify the main image cv add imgBg imgFg sum dst src clone for let i 0 i logo rows i for let j 0 j logo cols j dst ucharPtr i j 0 sum ucharPtr i j 0 cv imshow canvas dst src delete dst delete logo delete roi delete mask delete maskInv delete imgBg delete imgFg delete sum delete end doCV
ild canvas window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key cv onRuntimeInitialized let img document createElement img document body appendChild img img src imgurl img onload function console log img loaded try let src cv imread img let img copy src clone let img gray new cv Mat cv cvtColor src img gray cv COLOR RGB2GRAY let img blur new cv Mat cv medianBlur img gray img blur 7 let img edge new cv Mat cv adaptiveThreshold img blur img edge 255 cv ADAPTIVE THRESH MEAN C cv THRESH BINARY blockSize 9 C 2 let img cartoon new cv Mat let mask new cv Mat let maskInv new cv Mat cv cvtColor img copy mask cv COLOR RGBA2GRAY 0 cv threshold mask img copy 100 255 cv THRESH BINARY cv bitwise not mask maskInv Black out the area of logo in ROI cv bitwise and img copy img copy img cartoon img edge Converting to RGB from GrayScale cv cvtColor img edge img edge cv COLOR GRAY2RGB let img cartoon new cv Mat let img cartoon src clone cv bitwise and img copy img copy img cartoon img edge cv imshow canvas img cartoon dst delete src delete catch e console log e onload onload var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script let imgurl https notebook xbdev net var images pieces jpg document body style height 200pt let canvas document createElement canvas canvas width 200 canvas height 200 canvas id canvasout document body appendChild canvas window onload function console log script loaded for let key in cv if key includes dynCall continue console log key for key cv onRuntimeInitialized let img document createElement img document body appendChild img img src imgurl img onload function console log img loaded let src cv imread img let dst new cv Mat You can try more different parameters let rect new cv Rect 50 50 100 100 dst src roi rect cv imshow canvas dst dst delete src delete onload onload let imgurl1 https notebook xbdev net var images pieces jpg let imgurl2 https notebook xbdev net var images crownsmall png var script document createElement script script type text javascript script async true script src https docs opencv org master opencv js document head appendChild script document body style height 200pt let count 0 let img1 0 let img2 0 let canvas document createElement canvas canvas width 500 canvas height 500 canvas id canvasout document body appendChild canvas window onload function console log script loaded cv onRuntimeInitialized img1 document createElement img img1 src imgurl1 img2 document createElement img img2 src imgurl2 img1 onload function console log img 1 loaded count doCV img2 onload function console log img 2 loaded count doCV onRuntimeInitialized window onload function doCV if count 2 return console log doCV let src cv imread img1 let logo cv imread img2 let dst new cv Mat let roi new cv Mat let mask new cv Mat let maskInv new cv Mat let imgBg new cv Mat let imgFg new cv Mat let sum new cv Mat let rect new cv Rect 0 0 logo cols logo rows console log logo cols logo rows console log src cols src rows I want to put logo on top left corner So I create a ROI roi src roi rect Create a mask of logo and create its inverse mask also cv cvtColor logo mask cv COLOR RGBA2GRAY 0 cv threshold mask mask 100 255 cv THRESH BINARY cv bitwise not mask maskInv Black out the area of logo in ROI cv bitwise and roi roi imgBg maskInv Take only region of logo from logo image cv bitwise and logo logo imgFg mask Put logo in ROI and modify the main image cv add imgBg imgFg sum dst src clone for let i 0 i logo rows i for let j 0 j logo cols j dst ucharPtr i j 0 sum ucharPtr i j 0 cv imshow canvas dst src delete dst delete logo delete roi delete mask delete maskInv delete imgBg delete imgFg delete sum delete end doCV