picdiff

[faithokamoto]

//Caution: converting an image to b&w doesn't work for all images.
var cv = require("opencv.js")

function handle_hello_opencv(vals){
    if(vals.clicked_button_value == "show difference"){
        //src_image_id.src = vals.file_input_id
        setTimeout(function(){ //need to delay until image is loaded
            let mat1 = cv.imread(src1_image_id)
            let mat2 = cv.imread(src2_image_id)
            let diff = new cv.Mat()
            let red = []
            cv.subtract(mat1, mat2, diff)
            for (var i = diff.rows; i >= 0; i--) {
            	for (var j = diff.cols; j >= 0; j--) {
                	diff.ucharPtr(j, i)[3] = 255
                    if (j === 5) {
                    	red.push(diff.ucharPtr(j, i)[0])
                    }
                }
            }
            cv.imshow("diff_canvas_id", diff)
            out(red)
            mat1.delete()
            mat2.delete()
            diff.delete()
        }, 100)
    }
}

show_window({
    content:
    `<b>Hello OpenCV.js</b><br/>
     1. Choose a file with an extension of .gif, .jpeg or .png<br/>
     2. Click on "show image".<br/>
     The image on the left has no cv processing.<br/>
     The right is changed to gray by cv.<br/>
     You may have to click on "Show Images" twice to show the 2nd image.<br/>
    <input type="file" id="file1_input_id"
           accept="image/gif, image/jpeg, image/png"/>
    <input type="file" id="file2_input_id"
           accept="image/gif, image/jpeg, image/png"/>
    <input type="button" value="show difference"/>
    <p/>
    <img id="src1_image_id" src="C:/Users/extstudent/Pictures/Saved Pictures/on.jpg"></img>
    <img id="src2_image_id" src="C:/Users/extstudent/Pictures/Saved Pictures/off.jpg"></img>
    <canvas id="diff_canvas_id"></canvas>`,
    x: 50, y: 50, width: 800, height: 600,
    callback: handle_hello_opencv
})