[英]Jquery Webcam Plugin No Picture Being Displayed When Photo Is Taken
I am using jquery webcam plugin and when i take the picture its not showing up in the canvas. 我正在使用jquery网络摄像头插件 ,当我拍摄照片时,它没有显示在画布上。 I would like to know if i have to upload the image to the server first before it can be displayed on the canvas or will it be shown once its snapped.
我想知道是否必须先将图像上载到服务器,然后才能将其显示在画布上,或者将其捕捉后立即显示。
Code: 码:
$(document).ready(function(){
$("#camera").webcam({
width: 315,
height: 240,
useMicrophone: false,
mode: "callback",
swffile: "resources/swf/jscam_canvas_only.swf",
onLoad: function() {
var cams = webcam.getCameraList();
for(var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
}
},
debug: function (type, string) {
$("#status").html(type + ": " + string);
},
onCapture: function () {
jQuery("#flash").css("display", "block");
jQuery("#flash").fadeOut("fast", function () {
jQuery("#flash").css("opacity", 1);
webcam.snap();
});
webcam.snap();
},
onSave: 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);
pos = 0;
}
}
});
});
<label id="status"></label>
<div id="camera"></div>
<div><p><canvas id="canvas" height="240" width="320"></canvas></p></div>
<a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a>
This is what i did and it works very well now. 这就是我所做的,并且现在效果很好。 Now it just to figure how to upload to the server in java:
现在,只想弄清楚如何使用java上传到服务器:
Code 码
<script type="text/javascript">
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");
pos = 0;
}
};
$(document).ready(function(){
$("#camera").webcam({
width: 315,
height: 240,
useMicrophone: false,
mode: "callback",
swffile: "resources/swf/jscam_canvas_only.swf",
quality:85,
onSave: saveCB,
onCapture: function () {
webcam.save();
}
});
$('#upload').click(function () {
webcam.capture();
return false;
});
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);
}
}, false);
});
<label id="status"></label>
<div id="camera"></div>
<div><p><canvas id="canvas" height="240" width="320"></canvas></p></div>
<input id="upload" type="button" value="Take Photo">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.