HTML5+Canvas调用手机拍照功能实现图片上传（上）
作者：鬼脚飞
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了HTML5+Canvas，和jquery技术，调用手机拍照功能实现图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
因为最近一段时间，一直在弄微信项目，其中涉及到了证件上传的功能，刚开始的时候一点头绪都没有，上网查了很多资料，QQ群里面也问了不少人，很多人说如果是app程序，可以申请系统权限，然后再去调用系统底层的东西，但是微信是在浏览器里面操作的，我们自定义的页面也是通过微信内置浏览器打开的，而且微信浏览器在内部进行了很多特殊处理，屏蔽了很多东西，所以要在页面调用拍照功能或者是打开手机系统的图库目录是不可能的，当然，这些都只是大伙儿理论上的猜测而已，而在我查了两天的资料之后，发现这个问题原来是可以解决的，而且实现的过程居然也很简单。只是用到了HTML5的file文件上传功能，再配合canvas即可。下面附上源代码：
&meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&meta name="format-detection" content="telephone=yes"&
&meta charset="UTF-8"&
&title&上传证件&/title&
margin: 20px 20%;
color:#777;
text-align:
margin-top: 20
&h1 class="text-center"&上传证件...&/h1&
&input type="file"/&
&div id="result" align="center"&&/div&
&!-- 引入jQuery --&
&script type="text/javascript" src="../js/jQuery/jquery-1.9.1.min.js"&&/script&
&script type="text/javascript" src="../js/LocalResizeIMG.js"&&/script&
&!-- mobileBUGFix.js 兼容修复移动设备 --&
&script src="../js/mobileBUGFix.mini.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$("input:file").localResizeIMG({
width: 500,
quality: 0.8,
success: function (result) {
var img = new Image();
img.src = result.base64;
console.log(result.clearBase64);
//$("body").append(img);
$("#result").empty();
$("#result").append(img); //呈现图像(拍照結果)
url: "upLoadImageServlet",
type: "POST",
data:{formFile:result.clearBase64},
dataType: "HTML",
timeout: 1000,
error: function(){
alert("Error loading PHP document");
success: function(result){
//alert(result);
//console.log(result);
alert("Uploads success~")
上面实现的流程导致是这样的，首先在前端把图片进行压缩，因为手机的不同，可能有的手机拍照给力，像素高，拍出来的图片的大小就相对大一些，所以这里通过一个插件进行了压缩，然后转换成为Base64的编码，再把Base64的编码使用AJAX来POST到服务器，然后在Java或者PHP后台进行Base64解码，解出来的路径即为上传图片的路径地址，然后再进行存储，写到文件或者数据库里面。
此外，这里需要说明一个问题：很多人都说到了微信内置浏览器，之前我也一直认为微信内置浏览器就是微信自己开发的一套浏览器，然后对很多东西进行了限制。其实不是这样的，微信本身并没有再重新开发一套浏览器，而是调用的系统自身的浏览器，是根据手机的不同系统而变化的。微信内置浏览器调用的是手机系统默认浏览器，ios和Android系统默认浏览器都是webkit内核，只是对HTML5和CSS3的支持程度可能不同。因为浏览器只是系统的一部分，因此系统默认浏览器不会单独升级，对HTM5、CSS3的支持程度与系统版本有很大关系。安卓版微信直接调用系统浏览器内核, iOS则是调用safari,大家可以看到下面1和3的效果是一模一样的，1是微信浏览器打开的，3则是魅族MX 3自带的系统浏览器打开的效果。
上面我的我都测试过了，可以正常运行。下面附上几张照片：
1、这是在微信里面打开的效果
2、这是在手机UC浏览器打开的效果：
3、这个是在系统自带浏览器里面打开的效果（ps:我的手机是魅族MX 3），但是这个不是打开系统图库目录，而是直接定位到了系统的文件夹根目录。
下一篇会讲到在Java后台进行图片上传操作：
插件地址：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具调用手机摄像头或者手机相册实现文件上传，利用html5或者其他一些插件 极客标签 | 在线编程知识分享学习平台
发布于，阅读1997次，收藏 1次，评论条 - 来自
调用手机摄像头或者手机相册实现文件上传，利用html5或者其他一些插件
复杂的生活，简单的我！
极客主页：
已上传的图片列表：
尚未上传任何图片...
在线调试地址范例
例如：/gb/debug/bc4a78a6--b7cb-649ce1bda104.htm
以后再转发，立刻下载！当前位置：
html5调用本地摄像头拍照上传教程
许多朋友都在问html5怎么调用本地摄像头，本文小编就为您带来详细教程。
在的世界里，要获取本地摄像头，只要配合js就可以轻松获取!本文小编就为您带来调用本地摄像头拍照上传教程，希望对大家能够有所帮助。
看看主要代码吧：
这个是前台HTML的代码。
&div id=&contentHolder&&& && &
&video id=&video& width=&320& height=&320& autoplay&
&/video&& && &
&button id=&snap& style=&display:none&& 拍照&/button&& && &&&
&canvas style=&display:none& id=&canvas& width=&320& height=&320&&
下面这个是主要代码了。(jquery)
&script&& &&&
&&//判断浏览器是否支持HTML5 Canvas& && && &&&
window.onload = function () {& && && &
& &&&try {& && && && && && &
//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持& && && && && && & document.createElement(&canvas&).getContext(&2d&);& && &&&
& && && &&&document.getElementByIdx(&support&).innerHTML = &浏览器支持HTML5 CANVAS&;& && && &
& && &}& && && &
& &&&catch (e) {& && && &&&
& && &&&document.getElementByIdx(&support&).innerHTML = &浏览器不支持HTML5 CANVAS&;& && &
& && &&&}& && && && && &
& &&&};& && && && && &
& &&&//这段代 主要是获取摄像头的视频流并显示在Video 签中& && && &&&
window.addEventListener(&DOMContentLoaded&, function () {& && && && &
& &var canvas = document.getElementByIdx(&canvas&),& && && && &&&
& &&&context = canvas.getContext(&2d&),& && && && && &
& &video = document.getElementByIdx(&video&),& && && &
& && && &videoObj = { &video&: true },& && && && &
& && &errBack = function (error) {& && && &&&
& && && && &console.log(&Video capture error: &, error.code);& &
& && && && && &};& && && && && &
& & //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow& && &
& && &&&if (navigator.getUserMedia) {& &&&
& && && && &&&navigator.getUserMedia(videoObj, function (stream) {
& && && && && && && &&&video.src =& && && && && &
& && & video.play();& && &
& && && && & }, errBack);& && && &&&
& & } else if (navigator.webkitGetUserMedia) {& && &&&
& && && &&&navigator.webkitGetUserMedia(videoObj, function (stream) {& && && &
& && && && & video.src = window.webkitURL.createObjectURL(stream);& && && &&&
& && && && &video.play();& && && &&&
& && &&&}, errBack);& && && &&&
& & }& && && &
& && &//这个是拍照按钮的事件，& && && &
& &&&$(&#snap&).click(function () {& && && &
& && && &context.drawImage(video, 0, 0, 320, 320);& &&&
& && && && &&&//CatchCode();& && && &&&
& & });& && && &&&
& && && & }, false);& && && &&&
& && && & //定时器& && && &
&&var interval = setInterval(CatchCode, &300&);& && &
& && && && && && && && & //这个是 刷新上 图像的& && &&&
& &function CatchCode() {& && &&&
& && & $(&#snap&).click();
//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途& &
& && && &&&var canvans = document.getElementByIdx(&canvas&);
//获取浏览器页面的画布对象& && && && && && && &&&
& &//以下开始编 数据& &
& && && && && && && && && && && & var imgData = canvans.toDataURL();
//将图像转换为base64数据
& && && && && &var base64Data = imgData.substr(22);
//在前端截取22位之后的字符串作为图像数据& && &
& && && && && && && && && & //开始异步上& && && && &
& &$.post(&uploadImgCode.ashx&, { &img&: base64Data }, function (data, status) {& && &
& && && && & if (status == &success&) {& && && && && &&&
& && &if (data == &OK&) {& && && && && &
& && && &&&alert(&二维 已经解析&);& && && && && && &
& & }& && && && && && &&&
& &else {& && && && &&&
& && && && & // alert(data);& && && &
& && && && & }& && && &
& && && &}& &&&
& && && && &&&else {& &
& && && && && && &&&alert(&数据上 失败&);& && && && && &&&
&&}& && && && && &}, &text&);& && && &&&
& && && & }& && &
最后的就是接收经过base64编码之后的图像文件了。
public void ProcessRequest (HttpContext context) {& &
& && &//接收经过base64编 之后的字符串& &
& && &context.Response.ContentType = &text/plain&;& && &&&
&&try& && & {& && && &&&
& &img =context.Request[&img&].ToString();
//获取base64字符串& && && &
& & byte[] imgBytes = Convert.FromBase64String(img);
//将base64字符串转换为字节数组& && && && &
&&System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);
//将字节数组转换为字节流& && &
& && &&&//将流转回Image，用于将PNG 式照片转为jpg，压缩体积以便保存。& && && &
& &&&System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);& &
& && && & imgae.Save(context.Server.MapPath(&~/Test/&) + Guid.NewGuid().ToString()+&.jpg&, System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片& && && && &
context.Response.Write(&OK&);//输出调用结果& && && && && &
& &}& && && & catch (Exception msg)& && && & {& && && && &
img =& && && && &
&&context.Response.Write(msg);& && &
& && &&&& && && && && &
& & }& && && && &&&
至此B/S通过本地摄像头拍照上传就完成了。HTML5的强大之处，爱不释手了。。。不在像以前需要写一堆烦人的东东了，而且你也可以不用去学flash...
以上便是小编为您带来的全部内容了，不知道对您有没有帮助呢?
核弹头小游戏网发布此文仅为传递信息，不代表认同其观点或者证实其描述!
游戏老司机HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）
上一篇只讲到前台操作，这篇专门涉及到后台处理，前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台，然后Java这边进行接收处理，通过对图片数据信息进行Base64解码，之后使用流将图片数据信息上传至服务器进行保存，并且将图片的路径地址存进。
大家可以点此链接查看前台本地压缩上传的处理：
HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（一）
ok,废话不多说了，直接贴代码吧。
1、前台js代码：
async:false,//是否异步
cache:false,//是否使用缓存
type: "POST",
data:{fileData:fileData,licenceName:licenceName,cust_tax_code:cust_tax_code,phoneNum:phoneNum,state_id:state_id},
dataType: "json",
timeout: 1000,
contentType : 'application/x-www-form- charset=utf-8',
url: $('#ctx').val()+"CustomerCheckServlet?action=uploadLicence",
success: function(result){
console.log(result);
if(result == true){
alert('Success Upload~~~');
}else if(result == false){
alert('Error Upload~~~');
error: function(){
alert("Error Linking~");
2、后台Java代码
* 证件上传
* @param request
* @param response
* @throws IOException
public void uploadLicence(HttpServletRequest request,HttpServletResponse response) throws IOException{
("=====================uploadLicence");
df = new SimpleDateFormat("yyyy-MM-dd");
String cust_tax_code = request.getParameter("cust_tax_code");
String phoneNum = request.getParameter("phoneNum");
String licenceName = request.getParameter("licenceName");
String fileData = request.getParameter("fileData");//Base64编码过的图片数据信息，对字节数组字符串进行Base64解码
String imgPath = uploadFile(fileData,liceneName);//进行文件上传操作，上传到服务器中存放（这里是上传到服务器项目文件夹中存到）
boolean result =//最终上传成功与否的标志
custCheckInfo = new CustomerCheckInfo();
custCheckInfo.setCust_tax_code(cust_tax_code);
custCheckInfo.setPhonenum(phoneNum);
custCheckInfo.setUpdate_time(df.format(new Date()));
boolean save_flag = customerService.saveRegistCertInfo(custCheckInfo);//保存路径
//判断数据库中的路径是否存在，并且文件夹中的文件是否存在(判断是否上传成功的标志)
boolean is_success = isSuccessUpload(licenceName, cust_tax_code, phoneNum);
if(save_flag && is_success){
//如果证件上传成功，则记录到记录表中
if(result){
StateRecordInfo record = new StateRecordInfo();
record.setCust_tax_code(cust_tax_code);
record.setPhonenum(phoneNum);
record.setState_id(state_id);
saveStateRecord(record);//执行状态保存操作
System.out.println("===result:"+result);
PrintWriter pw = response.getWriter();
pw.print(result);
pw.close();
* 文件上传
* @param fileData
* @param fileName
public String uploadFile(String fileData,String fileName){
//在自己的项目中构造出一个用于存放用户照片的文件夹
String imgPath = this.getServletContext().getRealPath("/uploads/");
//如果此文件夹不存在则创建一个
File f = new File(imgPath);
if(!f.exists()){
f.mkdir();
//拼接文件名称，不存在就创建
imgPath = imgPath + "/" + fileName + ".jpg";
f = new File(imgPath);
if(!f.exists()){
f.mkdir();
("====文件保存的位置："+imgPath);
//使用BASE64对图片文件数据进行解码操作
BASE64Decoder decoder = new BASE64Decoder();
//通过Base64解密，将图片数据解密成字节数组
byte[] bytes = decoder.decodeBuffer(fileData);
//构造字节数组输入流
ByteArrayInputStream bais = new ByteArrayInputStream(bytes);
//读取输入流的数据
BufferedImage bi = ImageIO.read(bais);
//将数据信息写进图片文件中
ImageIO.write(bi, "jpg", f);// 不管输出什么格式图片，此处不需改动
bais.close();
} catch (IOException e) {
log.error("e:{}",e);
return imgP
* 判断是否成功上传
public boolean isSuccessUpload(String licenceName,String cust_tax_code,String phonenum){
boolean flag =
String licencePath = "";//证件图片上传成功之后保存的路径
custCheckInfo = customerService.getCustomerCheckInfo(cust_tax_code, phonenum);
licencePath = custCheckInfo.getTax_regist_cert();
//判断证件路径不为空并且在上传存放的文件夹中存在，就表明以上传成功
File f = new File(licencePath);
if(licencePath.length() >0 && f.exists()){
好了，到这里就全部结束了，这就是HTML5+jQuery+Canvas调用手机拍照功能实现图片上传的全部实现过程，总感觉自己的思路有些混乱，嗯，慢慢进步吧！40154人阅读
jQuery学习系列（4）
因为最近一段时间，一直在弄微信项目，其中涉及到了证件上传的功能，刚开始的时候一点头绪都没有，上网查了很多资料，QQ群里面也问了不少人，很多人说如果是app程序，可以申请系统权限，然后再去调用系统底层的东西，但是微信是在浏览器里面操作的，我们自定义的页面也是通过微信内置浏览器打开的，而且微信浏览器在内部进行了很多特殊处理，屏蔽了很多东西，所以要在页面调用拍照功能或者是打开手机系统的图库目录是不可能的，当然，这些都只是大伙儿理论上的猜测而已，而在我查了两天的资料之后，发现这个问题原来是可以解决的，而且实现的过程居然也很简单。只是用到了HTML5的file文件上传功能，再配合canvas即可。下面附上源代码：
&span style=&font-family:KaiTi_GB2312;font-size:14&&&!DOCTYPE html&
&html lang=&zh-CN&&
&meta name=&viewport& content=&height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&&
&meta name=&format-detection& content=&telephone=yes&&
&meta charset=&UTF-8&&
&title&上传证件&/title&
margin: 20px 20%;
color:#777;
text-align:
margin-top: 20
&h1 class=&text-center&&上传证件...&/h1&
&input type=&file&/&
&div id=&result& align=&center&&&/div&
引入jQuery
&script type=&text/javascript& src=&../js/jQuery/jquery-1.9.1.min.js&&&/script&
&script type=&text/javascript& src=&../js/LocalResizeIMG.js&&&/script&
mobileBUGFix.js 兼容修复移动设备
&script src=&../js/mobileBUGFix.mini.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
$(&input:file&).localResizeIMG({
width: 500,
quality: 0.8,
success: function (result) {
var img = new Image();
img.src = result.base64;
console.log(result.clearBase64);
//$(&body&).append(img);
$(&#result&).empty();
$(&#result&).append(img); //呈现图像(拍照結果)
url: &upLoadImageServlet&,
type: &POST&,
data:{formFile:result.clearBase64},
dataType: &HTML&,
timeout: 1000,
error: function(){
alert(&Error loading PHP document&);
success: function(result){
//alert(result);
//console.log(result);
alert(&Uploads success~&)
&/html&&/span&
& &上面实现的流程导致是这样的，首先在前端把图片进行压缩，因为手机的不同，可能有的手机拍照给力，像素高，拍出来的图片的大小就相对大一些，所以这里通过一个插件进行了压缩，然后转换成为Base64的编码，再把Base64的编码使用AJAX来POST到服务器，然后在Java或者PHP后台进行Base64解码，解出来的路径即为上传图片的路径地址，然后再进行存储，写到文件或者数据库里面。
此外，这里需要说明一个问题：很多人都说到了微信内置浏览器，之前我也一直认为微信内置浏览器就是微信自己开发的一套浏览器，然后对很多东西进行了限制。其实不是这样的，微信本身并没有再重新开发一套浏览器，而是调用的系统自身的浏览器，是根据手机的不同系统而变化的。微信内置浏览器调用的是手机系统默认浏览器，ios和Android系统默认浏览器都是webkit内核，只是对HTML5和CSS3的支持程度可能不同。因为浏览器只是系统的一部分，因此系统默认浏览器不会单独升级，对HTM5、CSS3的支持程度与系统版本有很大关系。安卓版微信直接调用系统浏览器内核,
iOS则是调用safari,大家可以看到下面1和3的效果是一模一样的，1是微信浏览器打开的，3则是魅族MX 3自带的系统浏览器打开的效果。
上面我的我都测试过了，可以正常运行。下面附上几张照片：
1、这是在微信里面打开的效果
2、这是在手机UC浏览器打开的效果：
3、这个是在系统自带浏览器里面打开的效果（ps:我的手机是魅族MX 3），但是这个不是打开系统图库目录，而是直接定位到了系统的文件夹根目录。
下一篇会讲到在Java后台进行图片上传操作：
原文地址：http://cong5.net/html5-canvas-uploads-images.html
插件地址：/think2011/LocalResizeIMG
源代码下载地址：http://download.csdn.net/detail/hu1991die
QQ群号： &注：这是我自己建的一个java技术群，欢迎进群讨论一些技术问题，大家互相学习，共同进步！！！
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：161358次
积分：1921
积分：1921
排名：千里之外
原创：54篇
评论：46条
(2)(1)(2)(2)(4)(8)(12)(6)(5)(4)(8)(1)(1)(4)(1)}