为什么我为动态创建的图像获得自然宽度 0

Question

我正在使用 Webcam.js 从相机获取图像。

document.getElementById('cameraImage').src = data_uri; data_uri 给我相机的图像形式捕获事件。

然后我在 JavaScript 中动态创建图像 var img = 新图像（）； img.src = data_uri;

当我尝试使用 Facedetection.js 在其上应用人脸检测时它给出错误 Failed to execute getImageData on CanvasRenderingContext2D: The source width is 0.

我如何设置图像的源宽度以使人脸检测正常工作

Answer 1

如果您尝试从其他服务器加载图像，则出于安全原因可能会出现此问题。

请关注这个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 2

将数据 URI 指定为图像源是一种异步操作。在尝试对图像执行任何其他操作之前，请确保图像已完全加载：

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

Answer 3

具体针对 Facedetection js 做一个修改，这样你的问题就会得到解决。

在facedetection.js中你会发现

灰度（图像）{ } 函数

更改以下 canvas 宽度和高度设置

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

您的人脸检测将开始正常工作

Answer 4

我在使用来自服务器文件的图像时遇到同样的问题（加载速度比本地文件慢）。这是我的修复（从第 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;

                        }

为什么我为动态创建的图像获得自然宽度 0

Why I getting natural width 0 for dynamically created image

javascript

jquery

image-processing

face-detection

webcam.js