Почему я получаю естественную ширину 0 для динамически создаваемого изображения

Question

Я использую Webcam.js для получения изображений с камеры.

document.getElementById('cameraImage').src = data_uri; data_uri дает мне событие захвата формы изображения камеры.

Затем я создаю изображение динамически в JavaScript, как var img = new Image(); img.src = data_uri;

Когда я пытаюсь применить обнаружение лица к нему с помощью Facedetection.js, он выдает ошибку Failed для выполнения getImageData на CanvasRenderingContext2D: Ширина источника равна 0.

Как установить ширину исходного изображения, чтобы распознавание лиц работало

Answer 1

Чтобы быть конкретным для Facedetection, сделайте одну модификацию, чтобы решить вашу проблему.

В facedetection.js вы найдете

функция оттенков серого (изображение){ }

Измените следующие настройки ширины и высоты холста

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

Ваше распознавание лица начнет работать правильно

Answer 2

У меня та же проблема при использовании изображения из файла сервера (загрузка медленнее, чем локальный файл). Это мое исправление (из строки номер около 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;

                        }

Answer 3

Эта проблема может возникнуть по соображениям безопасности, если вы пытаетесь загрузить изображения с другого сервера.

Пожалуйста, следуйте этому https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image.

Проверьте, видите ли вы изображение после его создания. Тест прост:

var newImg = document.createElement("img");
newImg.src = data_uri;
document.body.appendChild(newImg);

Answer 4

Назначение URI данных в качестве источника изображения является асинхронной операцией. Убедитесь, что ваше изображение полностью загружено, прежде чем пытаться что-либо сделать с ним:

var img = new Image();
img.onload = function () {
    // Call your face detection methods here...
}
img.src = data_uri;