How to resize the aligned face images to a constant fixed size?

Hi I am trying to display the list of detected and aligned face images in a scroll div in html5. I am able to detect and append into the div dynamically however the size of the resultant face images are all different. At which function do I change the width and height so let’s say they will all be 160x160.

const input = await faceapi.toNetInput(videoEl)
        const locations = await faceapi.locateFaces(input, minConfidence)
        //const resized_locations = locations.map(det => det.forSize(160, 160))
        const faceImages = await faceapi.extractFaces(input.inputs[0], locations)

        // detect landmarks and get the aligned face image bounding boxes
        const alignedFaceBoxes = await Promise.all(faceImages.map(
            async (faceCanvas, i) => {
            const faceLandmarks = await faceapi.detectLandmarks(faceCanvas)
            return faceLandmarks.align(locations[i])
            }
        ))
        const alignedFaceImages = await faceapi.extractFaces(input.inputs[0], alignedFaceBoxes)
        
        // free memory for input tensors
        input.dispose()

        //$('#facesContainer').empty()
        faceImages.forEach(async (faceCanvas, i) => {
            $('#facesContainer').append(alignedFaceImages[i])
            percentage = percentage + 5;
        })

These are the script i used for detect and append. I tried resizing the faceCanvas, or looping through #faceContainer and resize them, or mapping the alignedFaceImages to 160x160 size but all to no avail. Any assistance is much appreciated. Thank you!

[stephenxp04]

I did the html5 canvas method. Since individual alignedFaceImages element is a HTML canvas just create a new canvas children with size I wanted, then draw the alignedFaceImages[i] into the new canvas context inside the forEach loop.

var res = document.createElement("canvas")
            res.width = 160
            res.height = 160
            res_con = res.getContext("2d")
            res_con.drawImage(alignedFaceImages[i], 0, 0, 160, 160)

i know the approach is rather simple not sure about the optimization since this is just POC.

Not familiar with the tensor method though, it is possible to use tf function within js?

[pravynandas]

I did the html5 canvas method. Since individual alignedFaceImages element is a HTML canvas just create a new canvas children with size I wanted, then draw the alignedFaceImages[i] into the new canvas context inside the forEach loop.

var res = document.createElement("canvas")
            res.width = 160
            res.height = 160
            res_con = res.getContext("2d")
            res_con.drawImage(alignedFaceImages[i], 0, 0, 160, 160)

i know the approach is rather simple not sure about the optimization since this is just POC.

Not familiar with the tensor method though, it is possible to use tf function within js?

Just in case if somebody looking for a canvas without “stretching” the image, you can do x,y offsets. My solution is like below

faceImages.forEach((face)=>{ var res = canvas.createCanvas(200, 200) let h = face.height; let w = face.width; let a = 0; let b = 0; if (h <= 200 && w <= 200) { a = (200 - w) / 2; b = (200 - h) / 2; res.getContext(“2d”).drawImage(face, a, b, w, h) } else { res.getContext(“2d”).drawImage(face, 0, 0, 200, 200) } //save or display canvas })