Generate sketch from a picture. OpenCV.js demo.

Last modified: March 3, 2023

OpenCV JS code

function updateImage({img,outputCanvas}){const cv=window.cv;let src=cv.imread(img);let grey_img=new cv.Mat();cv.cvtColor(src,grey_img,cv.COLOR_RGBA2GRAY);src.delete();let invert_img=new cv.Mat();cv.bitwise_not(grey_img,invert_img);let blur_img=new cv.Mat();let ksize=new cv.Size(33,33);//let ksize = new cv.Size(111, 111); // this is probably something to play around with
//let ksize = new cv.Size(30, 30); // this is probably something to play around with
cv.GaussianBlur(invert_img,blur_img,ksize,0,0,cv.BORDER_DEFAULT);invert_img.delete();let invblur_img=new cv.Mat();cv.bitwise_not(blur_img,invblur_img);blur_img.delete();let sketch_img=new cv.Mat();const scale=256.0;//const scale=128.0;
cv.divide(grey_img,invblur_img,sketch_img,scale);invblur_img.delete();grey_img.delete();cv.imshow(outputCanvas,sketch_img);sketch_img.delete();}