温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
敢爱敢恨敢拼之人！
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
jquery前端：initWebcam: function() {
var image = new Array();
var pos = 0;
var w = 320;
var h= 240;
Do("/proxy/www/widget/webcam/jquery.webcam.js", function() {
$("#camera").webcam({
height: h,
mode: "callback",
swffile: "/proxy/www/widget/webcam/jscam.swf",
onSave: function(data) {
image.push(data);
pos += 4 *
if (pos == 4 * w * h) {
$.post("/util/WebcamAction_screenshot", {w: w, h: h , pix:image.join('|')},function
$("#previewPic").attr('src', msg);
$("#signaturePic").attr("data-url", msg);
$("#signatureSubmit").attr("data-url", msg);
image = new Array();
$("#localPic").click();
onCapture: function () {
webcam.save();
onLoad: function() {
debug: function (type, string) {
if (type == "error") {
},&&&java后台：//base64解码public String uploadBase64() {
String image = request.getParameter("image").replace("data:image/base64,", "").trim();
String basePath = ResourceUtil.getBasePath(ResourceUtil.TYPE_IMAGE);
String savePath = ResourceUtil.getSavePath(basePath);
File dirSavePath = new File(savePath);
if (!dirSavePath.exists()) {
dirSavePath.mkdirs();
String fileName = UUID.randomUUID().toString() + ".png";
basePath += fileN
savePath += fileN
base64ToImg(image, savePath);
outputPlain(basePath);}public boolean base64ToImg(String imgStr, String imgFilePath) {
if (imgStr == null) {
BASE64Decoder decoder = new BASE64Decoder();
byte[] bytes = decoder.decodeBuffer(imgStr);
for (int i = 0; i & bytes. ++i) {
if (bytes[i] & 0) {// 调整异常数据
bytes[i] += 256;
OutputStream out = new FileOutputStream(imgFilePath);
out.write(bytes);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}}//base32解码public String uploadBase32() {
String width = request.getParameter("w");
String height = request.getParameter("h");
String pix = request.getParameter("pix");
int w = Integer.parseInt(width);
int h = Integer.parseInt(height);
String basePath = ResourceUtil.getBasePath(ResourceUtil.TYPE_IMAGE);
String savePath = ResourceUtil.getSavePath(basePath);
BufferedImage bf = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
String[] rows = pix.split("\\|");
for (int i = 0; i & rows. i++) {
String[] col = rows[i].split(";");
for (int j = 0; j & col. j++) {
int data = Integer.parseInt(col[j], 10);
bf.setRGB(j, i, data);
File picPath = new File(savePath);
if (!picPath.exists()) {
picPath.mkdirs();
String fileName = UUID.randomUUID().toString() + ".jpg";
basePath += fileN
savePath += fileN
ImageIO.write(bf, "jpg", new File(savePath));
} catch (Exception e) {
e.printStackTrace();
outputPlain(basePath);}该插件有个缺点，就是不能自定义尺寸，如果要自定义尺寸需要更改flash源码
阅读(9130)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'jquery.webcam进行摄像头拍照',
blogAbstract:'jquery.webcam官方给的例子是php，故写个java例子：如下jquery前端：initWebcam: function() {
var image = new Array();
var pos = 0;
var w = 320;
var h= 240;
Do(\"/proxy/www/widget/webcam/jquery.webcam.js\", function() {
$(\"#camera\").webcam({
height: h,
mode: \"callback\",',
blogTag:'webcam',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:7,
publishTime:4,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'敢爱敢恨敢拼之人！',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}PhoneGap+Jquery mobile开发摄像头调用和本地数据库使用的示例 - master2012 - 博客园
文章 - 180
我们一般注册都有一个,上传图像的模块,以前,用电脑注册的话,这个头像就比较麻烦了,不过,我们用手机的话就基本没这个问题了,这个例子就是,使用phonegap 调用摄像头拍下我们的头像,上传到服务器,然后,也保存到本地里面,方便加载.
显示用的主页
调用拍照的页面
为了,突显出我们用jqm的好处的,增加一个swip事件来控制,页面的切换
1,写个模板,方便,我们以后的代码的重用
&!DOCTYPE html&
&&&&&meta charset="UTF-8"&
&&&&&!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 --&
&&&&&meta http-equiv="Content-type"&name="viewport"
&&&&&&&&&&content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"&
&&&&&!--样式--&
&&&&&link rel="stylesheet"&href="jquery.mobile/jquery.mobile-1.0.1.min.css"&/&
&&&&&!--end--&
&&&&&!--导入的js框架--&
&&&&&script type="text/javascript"&charset="utf-8"&src="phonegap-1.4.1.js"&&/script&
&&&&&script src="jquery.mobile/jquery-1.6.4.min"&&/script&
&&&&&script src="jquery.mobile/jquery.mobile-1.0.1.min.js"&&/script&
&&&&&!--end--&
&&&&&!--自己写的js--&
&&&&&script type="text/javascript"&
&&&&&/script&
&&&&&!--end--&
&body onload="init();"&
&div data-role="page"&id="home"&
&&&&&div data-role="header"&
&&&&&&&&&h1&Hello,World&/h1&
&&&&&/div&
&&&&&div data-role="content"&id="content"&
&&&&&&&&&h1&content&/h1&
&&&&&/div&
&&&&&div data-role="footer"&
&&&&&&&&&h1&footer&/h1&
&&&&&/div&
&!--import custom library --&
&script type="text/javascript"&charset="utf-8"&src="apis/camera.js"&&/script&
&script type="text/javascript"&charset="utf-8"&src="apis/device.js"&&/script&
&script type="text/javascript"&charset="utf-8"&src="apis/storage.js"&&/script&
&!--end--&
2,模板写好了,就开始我们实际代码的编写吧.
1,首先,编写我们的device.js文件进行对应用的初始化工作
function&init() {
&&&&document.addEventListener("deviceready", onDeviceReady,&true);
2,然后接着写初始化用干的事情
var&onDeviceReady =&function() {
&&&&console.log("deviceready event fired");
&&&&pictureSource=navigator.camera.PictureSourceT
&&&&destinationType=navigator.camera.DestinationT
&&&&var&saveImage = kget("image");
&&&&if(saveImage){
&&&&&&&&&&var&cameraImage = document.getElementById('cameraImage');
&&&&&&&&&&cameraImage.style.visibility =&'visible';
&&&&&&&&&&cameraImage.src =&"data:image/base64,"&+ saveI
&&&&&&&&&&
&&&&document.addEventListener("searchbutton", onSearchKeyDown,&false);&&
&&&&document.addEventListener("menubutton", onMenuButtonDown,&false);
&&&&document.addEventListener("pause", onEventFired,&false);
&&&&document.addEventListener("resume", onEventFired,&false);
&&&&document.addEventListener("online", onEventFired,&false);
&&&&document.addEventListener("offline", onEventFired,&false);
&&&&document.addEventListener("backbutton", onEventFired,&false);
&&&&document.addEventListener("batterycritical", onEventFired,&false);
&&&&document.addEventListener("batterylow", onEventFired,&false);
&&&&document.addEventListener("batterystatus", onEventFired,&false);
&&&&document.addEventListener("startcallbutton", onEventFired,&false);
&&&&document.addEventListener("endcallbutton", onEventFired,&false);
&&&&document.addEventListener("volumedownbutton", onEventFired,&false);
&&&&document.addEventListener("volumeupbutton", onEventFired,&false);
这样我们的devices.js就简单的写完了.
3,写UI界面,这里也很简单
&&&&&&&&&div data-role="page"&id="home"&
&&&&&&&&&&&&&div data-role="header"&
&&&&&&&&&&&&&&&&&h1&个人信息&/h1&
&&&&&&&&&&&&&&&&&a href="#setting"&data-icon="home"&id="intro"&class="ui-btn-right"&设置&/a&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&div data-role="content"&id="homeContent"&
&&&&&&&&&&&&&&&&&p&头像&/p&
&&&&&&&&&&&&&&&&&img id="cameraImage"&src=""&/&
&&&&&&&&&&&&&&&&&!--这一块的动态实现你会图片的读取和存储,这个就很简单了..这里就不做介绍了..--&
&&&&&&&&&&&&&&&&&p&名字:阿柴&/p&
&&&&&&&&&&&&&&&&&p&联系方式:xxxxx&/p&
&&&&&&&&&&&&&/div&
&&&&&&&&&/div&
&&&&&&&&&div data-role="page"&id="setting"&
&&&&&&&&&&&&&div data-role="header"&
&&&&&&&&&&&&&&&&&h1&头像设置&/h1&
&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&div data-role="settingContent"&
&&&&&&&&&&&&&&&&&p&头像&/p&
&&&&&&&&&&&&&&&&&img id="settingImage"&src=""&/&
&&&&&&&&&&&&&&&&&div class="ui-grid-a"&
&&&&&&&&&&&&&&&&&&&&div class="ui-block-a"&&div& data-role="button"id="takePhoto"&take photo&/div&&/div&
&&&&&&&&&&&&&&&&&&&div class="ui-block-b"&& &div& data-role="button"&id="upload"&upload&/div&&/div&
&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&/div&
&&&&&&&&&/div&
&&&&&&&&&script type="text/javascript"&charset="utf-8"&src="apis/camera.js"&&/script&
&&&&&&&&&script type="text/javascript"&charset="utf-8"&src="apis/device.js"&&/script&
&&&&&&&&&script type="text/javascript"&charset="utf-8"&src="apis/storage.js"&&/script&
&&&&&/body&
上面就是页面的代码,就两个DIV的page,学过,jqm的朋友应该对此毫无压力了...
4,开始写点jqm的事件js,写在模板那个head,自己的那个块里面
&script type="text/javascript"&
&&&&&&&&&&&&
&&&&&&&&&&&&$('body').live("pageinit",function(){
&&&&&&&&&&&&&&&init();
&&&&&&&&&&&&});
&&&&&&&&&&&&
&&&&&&&&&&&&$("#home").live("pageinit",function(){
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&$('#homeContent').bind("swipeleft",function(){
&&&&&&&&&&&&&&&&&&$.mobile.changePage('#setting', { transition:&"fade"});
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&});
&&&&&&&&&&&&$('#setting').live("pageinit",function(){
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&var&saveImage = kget("image");
&&&&&&&&&&&&&&&&if(saveImage){
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&var&cameraImage = document.getElementById('settingImage');
&&&&&&&&&&&&&&&&&&&&cameraImage.style.visibility =&'visible';
&&&&&&&&&&&&&&&&&&&&cameraImage.src =&"data:image/base64,"&+ saveI
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&$('#settingContent').bind("swiperight",function(){
&&&&&&&&&&&&&&&&&&&&$.mobile.changePage('#home',{ transition:&"fade"});
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&$('#takePhoto').bind("tap",function(){
&&&&&&&&&&&&&&&&&&&&take_pic();
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&});
&&&&&&&&&/script&
这块代码的就要有一点熟悉jqm的人写好了,有啥不懂的先看一下jqm的官方文档吧...
5,写了这么久,都没怎么用到phonegap,接下来就是phonegap大展身手的时刻到了..
phonegap的照片类型
还记得我们在devices.js定义的两个变量吗?
pictureSource=navigator.camera.PictureSourceT
destinationType=navigator.camera.DestinationT
以上就是等下,可能要用到的参数介绍
新建一个camera.js,
function&take_pic() {
&&&&navigator.camera.getPicture(onPhotoDataSuccess,&function(ex) {
&&&&&&&&alert("Camera Error!");
&&&&&&&&quality : 50,
&&&&targetWidth: 320,
&&&&targetHeight: 240,
&&&&destinationType:destinationType.DATA_URL
&&&&&&&&});
function&onPhotoDataSuccess(imageData) {
&&&&console.log("* * * onPhotoDataSuccess");
&&&&var&cameraImage = document.getElementById('cameraImage');
&&&&cameraImage.style.visibility =&'visible';
&&&&kset("image",imageData);
&&&cameraImage.src =&"data:image/base64,"&+ imageD
接下来,新建一个storage.js,用来简单封装storage的api
function&kset(key, value){
&&&&console.log("key"+key+"value"+value);
&&&&window.localStorage.setItem(key, value);
function&kget(key){
&&&&console.log(key);
&&&&return&window.localStorage.getItem(key);
function&kremove(key){
&&&&window.localStorage.removeItem(key);
function&kclear(){
&&&&window.localStorage.clear();
function&kupdate(key,value){
&&&&window.localStorage.removeItem(key);
&&&&window.localStorage.setItem(key, value);
以上就是这次的内容了在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件，帮助开发人员容易地实现网站播放影片功能。可以显示视频和视频播放列表。&
　　1. Bigvideo.js
　　BigVideo.js&是一个 jQuery 插件能够，让你很方便将视频作为网站的背景。
　　它可以默默地播放一个视频，或用一个列表让用户选择他们喜欢的进行播放。
　　这个插件基于&&构建。此外如果有些设备不支持自动播放支持显示成图片。
　　2. jPlayer
　　&是一个可定制和更换皮肤的开源 JQuery 的播放器，允许在网页中播放音频和视频。jPlayer 是跨浏览器兼容的播放器，可以播放多种文件格式，如 MP3，MP4，WMV，FLV 和 OGG。
jPlayer 非常小只有 8kb 左右，并且提供一些流行 CMS 平台的相关插件如 WordPress, Joomla。
　　经测试支持 Firefox， Chrome, Opera, Safari, IE6, IE7, IE8, IE9。
　　3. Tubular
　　tubular 是一个强大的 jQuery 插件，可以让你设定一个 YouTube 视频作为你的网页背景。
　　4. FitVids.js
FitVids.js 是一个轻量级，易于使用的 jQuery 插件，用于在页中插入响应式视频。
　　5. BigScreen
　　&是一个使用 JavaScript Full Screen API 的简单 JS 库。BigScreen 能够很方便实现网站全屏功能。它支持 Chrome 15+， Firefox 10+， Safari 5.1+。
　　6. Cuepointjs
Cuepoint.js 是一个开源的 jQuery 插件用于在 HTML5 视频中创建提示点和处理字幕。
　　7. jQuery Webcam Plugin
jQuery Webcam 这个插件为直接在 JavaScript 中与摄像头通信提供了一个透明的访问层。它通一个 SW 文件与摄像头交互，可以显示 Webcam 输出和捕捉图象。如果有多个摄像头，它可以显示可用的摄像头列表，然后供用户选择其中任意一个。
　　这个插件提供了三种不同的模式：
　　我们可以使用 JavaScript 来调用一个轻量级 API 直接访问摄像头 & 或更确切地说使用 jQuery。
　　这样，就可以把图像传输到画布上（回调模式），也可以将图像存储在服务器（存储模式），
　　还能够以流媒体的形式实时传输 Flash 画布上的图像（流媒体模式）。
　　8. Video Lightbox
Video LightBox JS 是一个免费的向导程序，她只需要你点击几下，就能帮助您轻松地将视频添加到您的网站或博客并且不需要编写任何代码。
　　9. jQuery Video Gallery
一个简单和轻量级的视频画廊，用于展示 .swf 视频在一个窗口中。当选中一个缩略图时。
　　10. Popcorn.js
　　是 HTML5 中的 &video& 事件系统，封装了 &video& 元素并返回 Popcorn 对象。
　　这是由 Mozilla 赞助的项目。Popcorn.js 利用原生 HTMLMediaElement 属性，方法和事件，它们归成一个简单易学的 API，并提供一个插件来扩展功能。
阅读(...) 评论()网站已改版，请使用新地址访问：
webcam web访问本地摄像头插件demo,兼容ie,chrome,safri等等浏览器。 FlashMX/Flex 238万源代码下载-
&文件名称: webcam& & [
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 28 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：web访问本地摄像头插件demo,兼容ie,chrome,safri等等浏览器。-web access local camera plug-in demo
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&jQuery-webcam-master.zip&&webcam&&......\jquery.webcam.min.js&&......\js.js&&......\jscam.swf&&......\webcam.html
&输入关键字，在本站238万海量源码库中尽情搜索：1032人阅读
废话不多说，直接上干货。
实现在线拍照功能，用的是开源的JQuery.webCap.plugin这个js，简单介绍一下优缺点，方便决定是否采用这个。
优点：免费，开源，采用flash的方式，不用安装控件，功能上一般可以满足大家的需求；
缺点：图片的大小不能调整，如果调整的话需要自己写flash（源码开源，可以在官网下载）重新编译
官网地址：&& 除了是英文的，其他的基本全是优点，我的前台直接在官网上ctrl+c 的
参考资料汇总：
& 这个后台是C++或C#(buzhidao)，前台可以参考
这个是Java写的后台，代码稍微改一下就能用，不好的是：拍完照片直接就往后台传了（汗）
关键代码介绍：
参数data& 只是每行的数据& ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb
其他的直接看代码吧
http://download.csdn.net/detail/duguangwei/9284737
分享是美德，转载请注明来源
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1215次
排名：千里之外