javascript - JQueryを使用して写真を撮り、キャンバスに表示するにはどうすればよいですか?

Question

私はJQuery http://www.xarg.org/project/jquery-webcam-plugin/を使用しています

写真をアップロードせずに、キャンバスを使用して写真を撮り、表示したい。

var pos = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement('canvas');
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
ctx = canvas.getContext('2d');
image = ctx.getImageData(0, 0, 320, 240);

var saveCB = function (data) {
    var col = data.split(';');
    var img = image;
    for (var i = 0; i < 320; i++) {
        var tmp = parseInt(col[i]);
        img.data[pos + 0] = (tmp >> 16) & 0xff;
        img.data[pos + 1] = (tmp >> 8) & 0xff;
        img.data[pos + 2] = tmp & 0xff;
        img.data[pos + 3] = 0xff;
        pos += 4;
    }

    if (pos >= 4 * 320 * 240) {
        ctx.putImageData(img, 0, 0);
        foto = canvas.toDataURL("image/png");
        //document.getElementById('foto').value = foto;
        pos = 0;
    }
};

$("#camera").webcam({
    width: 320,
    height: 240,
    mode: "callback",
    swffile: '@Url.Content("~/Content/js/jscam_canvas_only.swf")',
    onSave: saveCB,
    onCapture: function () {
        webcam.save();
    }
});

$('#upload').click(function () {
    webcam.capture();
    return false;
});

キャンバスに表示するには、次のように新しいタグを作成する必要がありますか?

 <canvas id="canvas" width="320" height="240"></canvas>

写真を撮るボタン

 <input  id="upload" class="submit submit-blue" type="button" value="Tirar foto">

解決

キャンバス要素を取得するための load イベントを忘れていました。

window.addEventListener("load", function() {
var canvas = document.getElementById("canvas");

if (canvas.getContext) {
    ctx = document.getElementById("canvas").getContext("2d");
    ctx.clearRect(0, 0, 320, 240);


    image = ctx.getImageData(0, 0, 320, 240);
}

}、 間違い）;