Question

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

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

然后我在JavaScript中动态创建Image var img = new Image（）; img.src = data_uri;

当我尝试使用Facedetection.js对其应用面部检测时它给出错误在CanvasRenderingContext2D上执行getImageData失败：源宽度为0.

如何设置图像的源宽度，以便人脸检测能够正常工作

Answer 1

要特别针对Facedetection，请进行一次修改，以便您的问题得到解决。

在facedetection.js中你会找到

灰度（图像）{} 功能

更改以下画布宽度和高度设置

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

您的面部检测将开始正常工作

Answer 2

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

请遵循此https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image。

检查创建后是否看到图像。测试很简单：

AC No   Deal        Total INT   
100     123             30

Answer 3

将数据URI指定为图像源是异步操作。在尝试使用其他任何内容之前，请确保您的图像已满载：

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

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

4 个答案: