javascriptjqueryimage-processingface-detectionwebcam.js

Why I getting natural width 0 for dynamically created image

I am using Webcam.js for getting images form camera.

document.getElementById('cameraImage').src = data_uri; data_uri gives me the image form capture event of camera.

Then I create Image dynamically in JavaScript like var img = new Image(); img.src = data_uri;

When I am trying to apply face detection on it using Facedetection.js it gives error Failed to execute getImageData on CanvasRenderingContext2D: The source width is 0.

How can i set source width of image so face detection will work

Solution

  • To be specific for Facedetection js do one modification so your porblem will get solved.

    In facedetection.js you will find

    grayscale(image){ } function

    Change the following canvas width and height setting 

    canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;

    Your face detection will start working properly