Revision history [back]

How can you use K-Means clustering to posterize an image using opencv javascript?

How can you use K-Means clustering to posterize an image using opencv ~~javascript?~~

javascript?` Here I attach the code I have

<html> <head> <meta charset="utf-8"> <title>Hello OpenCV.js</title> </head> <body>

K Means Example

OpenCV.js is loading...

imageSrc <input id="fileInput" name="file" type="file"/>

canvasOutput

</body> </html>`

How can you use K-Means clustering to posterize an image using opencv javascript?

How can you use K-Means clustering to posterize an image using opencv javascript?` Here I attach the code I have

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello OpenCV.js</title> </head> <body> <body> <script onload="onOpenCvReady();" src="opencv.js" async="" type="text/javascript"></script> K <h1>K Means Example OpenCV.js Example</h1> <p id="status">OpenCV.js is loading...
imageSrc loading...</p> <div> <div class="inputoutput"><img id="imageSrc" alt="No Image" /> <div class="caption">imageSrc <input id="fileInput" name="file" type="file"/> <canvas type="file" /></div> </div> <div class="inputoutput"><canvas id="canvasOutput"></canvas> canvasOutput <div class="caption">canvasOutput</div> </div> <script type="text/javascript">let imgElement = document.getElementById('imageSrc'); let inputElement = document.getElementById('fileInput'); inputElement.addEventListener('change', (e) => { imgElement.src = URL.createObjectURL(e.target.files[0]); }, false); imgElement.onload = function() { let mat = cv.imread(imgElement); let sample= new cv.Mat(mat.rows * mat.cols, 3, cv.CV_32F); for( var y = 0; y < mat.rows; y++ ) for( var x = 0; x < mat.cols; x++ ) for( var z = 0; z < 3; z++) sample.ptr(y + x*mat.rows)[z] = mat.ucharPtr(y,x)[z]; var clusterCount = 4; var labels= new cv.Mat(); var attempts = 5; var centers= new cv.Mat(); var crite= cv.TermCriteria(cv.CV_TERMCRIT_ITER, 10000, 0.0001); var criteria = (cv.TERM_CRITERIA_EPS + cv.TERM_CRITERIA_MAX_ITER, 10, 1.0); cv.kmeans(sample, clusterCount, labels, criteria, attempts, cv.KMEANS_PP_CENTERS, centers ); mat.delete(); }; function onOpenCvReady() { document.getElementById('status').innerHTML = 'OpenCV.js is ready.'; }</script> </div> </body> </html>`

~~</body> </html>`~~