0

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

Prasad
  • 132
  • 1
  • 10
  • Can you share executable demo/snippet or [JSFiddle](https://jsfiddle.net/) ? [_Create a Minimal, Complete, and Verifiable example_](http://stackoverflow.com/help/mcve) – Rayon Sep 16 '16 at 06:32

4 Answers4

1

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

Prasad Joshi
  • 471
  • 4
  • 12
0

This problem may occur for security reasons if you are trying to load images from other server.

Please follow this https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image .

Check if you see an image after creating it. Test is simple:

var newImg = document.createElement("img");
newImg.src = data_uri;
document.body.appendChild(newImg);
Stoycho Trenchev
  • 557
  • 4
  • 12
  • This problem is caused when I am using Camera for getting image as well as when I am upload image from user too. – Prasad Sep 16 '16 at 08:01
0

Assigning a data URI as an image source is an async operation. Make sure your image is fully loaded before you try to do anything else with it:

var img = new Image();
img.onload = function () {
    // Call your face detection methods here...
}
img.src = data_uri;
Paul-Jan
  • 16,746
  • 1
  • 63
  • 95
0

I have same issue when using an image from server file ( load more slow than local file ). This my fix ( from line number about 16568 ):

if (time = new Date().getTime(), $$.is("img")) {
                            source = new Image(), source.src = $$.attr("src"),
                                    source.crossOrigin = $$.attr("crossorigin");

                            $(source).load(function () {
                                canvas = ccv.pre(source);
                                options.grayscale && (canvas = ccv.grayscale(canvas, source));
                                try {
                                    options.async && window.Worker ? ccv.detect_objects({
                                        canvas: canvas,
                                        cascade: cascade,
                                        interval: options.interval,
                                        min_neighbors: options.minNeighbors,
                                        worker: 1,
                                        async: !0
                                    })(done) : done(ccv.detect_objects({
                                        canvas: canvas,
                                        cascade: cascade,
                                        interval: options.interval,
                                        min_neighbors: options.minNeighbors
                                    }));
                                } catch (e) {
                                    options.error.apply($$, [2, e.message]), options.complete.apply($$, [!1]);
                                }
                            });
                            return this;

                        }
ducminh1903
  • 1
  • 2