0

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

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

然后我像 var img = new Image(); 这样在 JavaScript 中动态创建 Image img.src = data_uri;

当我尝试使用Facedetection.js对其应用人脸检测时，它 会给出错误无法在 CanvasRenderingContext2D 上执行 getImageData：源宽度为 0。

如何设置图像的源宽度以便人脸检测起作用

4

4 回答 4

1

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

在 facedetection.js 你会发现

灰度（图像）{ } 函数

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

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

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

于 2016-10-05T06:18:50.317 回答
0

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

请遵循此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);
于 2016-09-16T07:43:02.553 回答
0

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

var img = new Image();
img.onload = function () {
    // Call your face detection methods here...
}
img.src = data_uri;
于 2016-09-16T10:22:25.003 回答
0

使用服务器文件中的图像时我有同样的问题（加载比本地文件慢）。这是我的修复（从大约 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;

                        }
于 2016-10-06T04:52:31.073 回答