let img = document.getElementById('ima_fond');
let mat;
img.onload = function() {
    mat = cv.imread(img);
    document.getElementById('detect').addEventListener('click', function() {
        console.log(mat);
        let gray = new cv.Mat();
        cv.cvtColor(mat, gray, cv.COLOR_RGBA2GRAY, 0);
        let faces = new cv.RectVector();
        let profiles = new cv.RectVector();
        let faceCascade = new cv.CascadeClassifier();
        let profileCascade = new cv.CascadeClassifier();
        // Load pretrained classifier
        faceCascade.load("../models/haarcascade_frontalcatface.xml");
        profileCascade.load("../models/haarcascade_profileface.xml");
        // Detect faes
        let msize = new cv.Size(0, 0);
        faceCascade.detectMultiScale(gray, faces, 1.05, 0);
        profileCascade.detectMultiScale(gray, profiles, 1.1, 3, 0, msize, msize);

        // Show detected faces
        faces = faces.concat(profiles);
        for (let i = 0; i < faces.length; i++) {
            let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
            let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
                faces.get(i).y + faces.get(i).height);
            cv.rectangle(mat, point1, point2, [255, 0, 0, 255]);
        }
    });
}