jquery webcam 怎么用
2016-01-14 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
展开全部
jQueryWebcam这个插件为直接在JavaScript中与摄像头通信提供了一个透明的访问层。它通一个SW文件与摄像头交互,可以显示Webcam输出和捕捉图象。如果有多个摄像头,它可以显示可用的摄像头列表,然后供用户选择其中任意一个。
一、jQuery Webcam介绍
jQuery的摄像头插件是一个透明层,用相机直接在JavaScript中的沟通。
这个插件提供了三种不同的模式,通过一个小的接入网络摄像头应用程序接口直接与JavaScript
-或者更准确地说是jQuery。因此,它是可能带来的图像在画布上(回调模式),存储图像在服务器(保存模式)和流的Flash元素的实况图像画布上(流模式)。
二、jQuery Webcam使用方法
简单调用
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function() {},
onCapture: function() {},
debug: function() {},
onLoad: function() {}
});
参数说明
windth:flash文件的宽度
height:flash文件的高度
mode:储存模式:callback, save, stream
swffile:flash文件的地址
拍照
调用webcam.capture();方法实现拍照。
保存照片
webcam.save();方法实现保存照片,简单调用里面的onSave参数是保存照片的方法,接收一个函数为照片
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
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);
$.post("/author/uedsc?page=avatar", {type: "data", image: canvas.toDataURL("image/jpeg")}, function(){
location.reload();
});
pos = 0;
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("/author/uedsc?page=avatar", {type: "data", image: image.join('|')}, function(){
location.reload();
});
pos = 0;
}
};
}
以上是官方的例子,创建一个canvas来保存图片,然后上传到服务端。
一、jQuery Webcam介绍
jQuery的摄像头插件是一个透明层,用相机直接在JavaScript中的沟通。
这个插件提供了三种不同的模式,通过一个小的接入网络摄像头应用程序接口直接与JavaScript
-或者更准确地说是jQuery。因此,它是可能带来的图像在画布上(回调模式),存储图像在服务器(保存模式)和流的Flash元素的实况图像画布上(流模式)。
二、jQuery Webcam使用方法
简单调用
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function() {},
onCapture: function() {},
debug: function() {},
onLoad: function() {}
});
参数说明
windth:flash文件的宽度
height:flash文件的高度
mode:储存模式:callback, save, stream
swffile:flash文件的地址
拍照
调用webcam.capture();方法实现拍照。
保存照片
webcam.save();方法实现保存照片,简单调用里面的onSave参数是保存照片的方法,接收一个函数为照片
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
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);
$.post("/author/uedsc?page=avatar", {type: "data", image: canvas.toDataURL("image/jpeg")}, function(){
location.reload();
});
pos = 0;
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("/author/uedsc?page=avatar", {type: "data", image: image.join('|')}, function(){
location.reload();
});
pos = 0;
}
};
}
以上是官方的例子,创建一个canvas来保存图片,然后上传到服务端。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询