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

【问题标题】：Why I getting natural width 0 for dynamically created image为什么我为动态创建的图像获得自然宽度 0
【发布时间】：2017-01-24 07:14:57
【问题描述】：

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

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

然后我在 JavaScript 中动态创建图像，例如 var img = new Image(); img.src = data_uri;

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

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

【问题讨论】：

你能分享可执行的 demo/sn-p 或JSFiddle 吗？ Create a Minimal, Complete, and Verifiable example

标签： javascript jquery image-processing face-detection webcam.js

【解决方案1】：

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

                        }

【讨论】：

【解决方案2】：

要专门针对 Facedetection js 进行一项修改，这样您的问题就会得到解决。

在 facedetection.js 你会发现

灰度（图像）{ } 功能

改变如下画布宽高设置

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

请关注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);

【讨论】：

这个问题是在我使用相机获取图像以及从用户上传图像时引起的。