javascript - 動的に作成された画像で自然な幅 0 を取得する理由

Question

カメラから画像を取得するためにWebcam.jsを使用しています。

document.getElementById('cameraImage').src = data_uri; data_uri は、カメラのイメージ フォーム キャプチャ イベントを提供します。

次に、var img = new Image(); のように JavaScript で動的に Image を作成します。img.src = data_uri;

Facedetection.jsを使用して顔検出を適用しようとすると 、エラー Failed to execute getImageData on CanvasRenderingContext2D: The source width is 0 が発生します。

顔検出が機能するように画像のソース幅を設定するにはどうすればよいですか

Answer 1

Facedetection js に固​​有にするには、問題が解決されるように 1 つの変更を行います。

facedetection.js には、

グレースケール(画像){ } 関数

次のキャンバスの幅と高さの設定を変更します

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

顔検出が正常に機能し始めます

Answer 2

サーバーファイルからの画像を使用するときに同じ問題があります（ローカルファイルよりも読み込みが遅くなります）。これは私の修正です（行番号約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;

                        }

Answer 3

画像ソースとしてのデータ URI の割り当ては、非同期操作です。他の操作を行う前に、イメージが完全に読み込まれていることを確認してください。

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