Преобразование изображения в PencilSketch в opencv js и Android webview

#javascript #opencv #android-webview

Вопрос:

Я пытался использовать OpenCV js внутри Android studio webview для преобразования изображения в карандашный набросок или рисунок карандашом. Я знаю, как это сделать на python. Но я не могу сделать это в OpenCV js. Вот мой Html-код webview и js-код:

 <head>
    <title>
        Hi
    </title>
    <style>
        .container{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        #output{
            width: 100%;
            height: 100%;
        }
    </style>
    <script async src="opencv1.js" onload="onOpenCvReady()" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <canvas id="output" height="300" width="300"></canvas>
</div>
<img id="image" height="300" width="300">
<script>
    function onOpenCvReady(val){
        cv['onRuntimeInitialized']=()=>{
            var img_input = document.getElementById("image");
            var canvas = document.getElementById('output');
            var ctx = canvas.getContext("2d");
            img_input.src = val;
            img_input.style.visibility="hidden";
            img_input.onload = function(){
                let mat = cv.imread(img_input);
                let dst = new cv.Mat();
                let ksize = new cv.Size(5, 5);
                cv.cvtColor(mat,mat, cv.COLOR_BGR2GRAY);
                cv.GaussianBlur(mat, dst, ksize, 0, 0, cv.BORDER_DEFAULT);
                cv.divide(mat,mat,dst,scale=256.0)
                cv.imshow('output', mat)
                mat.delete(); dst.delete();
            }
        };
    }
</script>
</body>
</html>
 

Как преобразовать изображение в карандашный набросок в javascript с помощью OpenCV js? Любые предложения приветствуются.