0

我正在使用 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">

解决方案

我忘记了加载事件，以获取画布元素。

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);
}

}， 错误的）;

4

0 回答 0