为什么我为动态创建的图像获得自然宽度 0
Why I getting natural width 0 for dynamically created image
我正在使用 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.
我如何设置图像的源宽度以使人脸检测正常工作
如果您尝试从其他服务器加载图像,则出于安全原因可能会出现此问题。
请关注这个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);
将数据 URI 指定为图像源是一种异步操作。在尝试对图像执行任何其他操作之前,请确保图像已完全加载:
var img = new Image();
img.onload = function () {
// Call your face detection methods here...
}
img.src = data_uri;
具体针对 Facedetection js 做一个修改,这样你的问题就会得到解决。
在facedetection.js中你会发现
灰度(图像){ }
函数
更改以下 canvas 宽度和高度设置
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
您的人脸检测将开始正常工作
我在使用来自服务器文件的图像时遇到同样的问题(加载速度比本地文件慢)。这是我的修复(从第 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;
}
我正在使用 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.
我如何设置图像的源宽度以使人脸检测正常工作
如果您尝试从其他服务器加载图像,则出于安全原因可能会出现此问题。
请关注这个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);
将数据 URI 指定为图像源是一种异步操作。在尝试对图像执行任何其他操作之前,请确保图像已完全加载:
var img = new Image();
img.onload = function () {
// Call your face detection methods here...
}
img.src = data_uri;
具体针对 Facedetection js 做一个修改,这样你的问题就会得到解决。
在facedetection.js中你会发现
灰度(图像){ } 函数
更改以下 canvas 宽度和高度设置
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
您的人脸检测将开始正常工作
我在使用来自服务器文件的图像时遇到同样的问题(加载速度比本地文件慢)。这是我的修复(从第 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;
}