HTML5+Canvas+jQuery调用手机拍照功能实现图片上传简单示例

人气：489 时间：2020-07-30

这篇文章主要为大家详细介绍了HTML5+Canvas+jQuery调用手机拍照功能实现图片上传简单示例，具有一定的参考价值，可以用来参考一下。

对phpHTML5+Canvas+jQuery调用手机拍照功能实现图片上传简单示例感兴趣的小伙伴，下面一起跟随四海网的小编巴闭妹来看看吧！

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（一）

因为最近一段时间，一直在弄微信项目，其中涉及到了证件上传的功能，刚开始的时候一点头绪都没有，上网查了很多资料，QQ群里面也问了不少人，很多人说如果是app程序，可以申请系统权限，然后再去调用系统底层的东西，但是微信是在浏览器里面操作的，我们自定义的页面也是通过微信内置浏览器打开的，而且微信浏览器在内部进行了很多特殊处理，屏蔽了很多东西，所以要在页面调用拍照功能或者是打开手机系统的图库目录是不可能的，当然，这些都只是大伙儿理论上的猜测而已，而在我查了两天的资料之后，发现这个问题原来是可以解决的，而且实现的过程居然也很简单。只是用到了HTML5的file文件上传功能，再配合canvas即可。下面附上源代码：



<span style="font-family:KaiTi_GB2312;font-size:14px;"><!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">  
<head>  
    <meta charset="UTF-8">  
    <title>上传证件</title>  
    <style>  
        body {  
            margin: 20px 20%;  
            color:#777;  
            text-align: center;  
        }  
        #result{  
            margin-top: 20px;  
        }  
    </style>  
</head>  
<body>  
    <h1 class="text-center">上传证件...</h1>  
    <hr/>  
        <input type="file"/>  
        <div id="result" align="center"></div>  
    <hr/>  
      
    <!--   引入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); //呈现图像(拍照結果)  
                $.ajax({  
                    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~")  
                    }  
                });   
            }  
        });  
    </script>  
</body>  
</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），但是这个不是打开系统图库目录，而是直接定位到了系统的文件夹根目录。













HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

上一篇只讲到前台操作，这篇专门涉及到Java后台处理，前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台，然后Java这边进行接收处理，通过对图片数据信息进行Base64解码，之后使用流将图片数据信息上传至服务器进行保存，并且将图片的路径地址存进数据库。

 大家可以点此链接查看前台本地压缩上传的处理：
HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（一）

ok,废话不多说了，直接贴代码吧。

1、前台js代码：
[javascript] view plain copy print?
1.$.ajax({  
2.                async:false,//是否异步  
3.                cache:false,//是否使用缓存  
4.                type: "POST",  
5.                data:{fileData:fileData,licenceName:licenceName,cust_tax_code:cust_tax_code,phoneNum:phoneNum,state_id:state_id},  
6.                dataType: "json",  
7.                timeout: 1000,  
8.                contentType : 'application/x-www-form-urlencoded; charset=utf-8',  
9.                url: $('#ctx').val()+"CustomerCheckServlet?action=uploadLicence",  
10.                success: function(result){  
11.                    console.log(result);  
12.                    if(result == true){  
13.                        alert('Success Upload~~~');  
14.                    }else if(result == false){  
15.                        alert('Error Upload~~~');  
16.                    }  
17.                },  
18.                error: function(){  
19.                    alert("Error Linking~");  
20.                }  
21.            });  

2、后台Java代码
[java] view plain copy print?
1./** 
2.     * 证件上传 
3.     * @param request 
4.     * @param response 
5.     * @throws IOException  
6.     */  
7.    public void uploadLicence(HttpServletRequest request,HttpServletResponse response) throws IOException{  
8.        log.info("=====================uploadLicence");  
9.        df = new SimpleDateFormat("yyyy-MM-dd");  
10.          
11.        String cust_tax_code = request.getParameter("cust_tax_code");  
12.        String phoneNum = request.getParameter("phoneNum");  
13.        String licenceName = request.getParameter("licenceName");  
14.          
15.        String fileData = request.getParameter("fileData");//Base64编码过的图片数据信息，对字节数组字符串进行Base64解码  
16.        String imgPath = uploadFile(fileData,liceneName);//进行文件上传操作，上传到服务器中存放（这里是上传到服务器项目文件夹中存到）  
17.          
18.        boolean result = false;//最终上传成功与否的标志  
19.          
20.        custCheckInfo = new CustomerCheckInfo();  
21.        custCheckInfo.setCust_tax_code(cust_tax_code);  
22.        custCheckInfo.setPhonenum(phoneNum);  
23.        custCheckInfo.setUpdate_time(df.format(new Date()));  
24.          
25.        boolean save_flag = customerService.saveRegistCertInfo(custCheckInfo);//保存路径  
26.          
27.        //判断数据库中的路径是否存在，并且文件夹中的文件是否存在(判断是否上传成功的标志)  
28.        boolean is_success = isSuccessUpload(licenceName, cust_tax_code, phoneNum);  
29.        if(save_flag && is_success){  
30.            result = true;  
31.        }  
32.          
33.        //如果证件上传成功，则记录到记录表中  
34.        if(result){  
35.            StateRecordInfo record = new StateRecordInfo();  
36.            record.setCust_tax_code(cust_tax_code);  
37.            record.setPhonenum(phoneNum);  
38.            record.setState_id(state_id);  
39.              
40.            saveStateRecord(record);//执行状态保存操作  
41.        }  
42.          
43.        System.out.println("===result:"+result);  
44.        PrintWriter pw = response.getWriter();  
45.        pw.print(result);  
46.        pw.close();  
47.    }  
[java] view plain copy print?
1./** 
2.     * 文件上传 
3.     * @param fileData 
4.     * @param fileName 
5.     * @return 
6.     */  
7.    public String uploadFile(String fileData,String fileName){  
8.        //在自己的项目中构造出一个用于存放用户照片的文件夹  
9.        String imgPath = this.getServletContext().getRealPath("/uploads/");  
10.        //如果此文件夹不存在则创建一个  
11.        File f = new File(imgPath);  
12.        if(!f.exists()){  
13.            f.mkdir();  
14.        }  
15.        //拼接文件名称，不存在就创建  
16.        imgPath = imgPath + "/" + fileName + ".jpg";  
17.        f = new File(imgPath);  
18.        if(!f.exists()){  
19.            f.mkdir();  
20.        }  
21.          
22.        log.info("====文件保存的位置："+imgPath);  
23.          
24.        //使用BASE64对图片文件数据进行解码操作  
25.        BASE64Decoder decoder = new BASE64Decoder();  
26.        try {  
27.            //通过Base64解密，将图片数据解密成字节数组  
28.            byte[] bytes = decoder.decodeBuffer(fileData);  
29.            //构造字节数组输入流  
30.            ByteArrayInputStream bais = new ByteArrayInputStream(bytes);  
31.            //读取输入流的数据  
32.            BufferedImage bi = ImageIO.read(bais);  
33.            //将数据信息写进图片文件中  
34.            ImageIO.write(bi, "jpg", f);// 不管输出什么格式图片，此处不需改动  
35.            bais.close();  
36.        } catch (IOException e) {  
37.            log.error("e:{}",e);  
38.        }  
39.        return imgPath;  
40.    }  
[java] view plain copy print?
1./** 
2.     * 判断是否成功上传 
3.     * @return 
4.     */  
5.    public boolean isSuccessUpload(String licenceName,String cust_tax_code,String phonenum){  
6.        boolean flag = false;  
7.        String licencePath = "";//证件图片上传成功之后保存的路径  
8.          
9.        custCheckInfo = customerService.getCustomerCheckInfo(cust_tax_code, phonenum);  
10.        licencePath = custCheckInfo.getTax_regist_cert();  
11.      
12.        //判断证件路径不为空并且在上传存放的文件夹中存在，就表明以上传成功  
13.        File f = new File(licencePath);  
14.        if(licencePath.length() >0 && f.exists()){  
15.            flag = true;  
16.        }  
17.        return flag;  
18.    }  



好了，到这里就全部结束了，这就是HTML5+jQuery+Canvas调用手机拍照功能实现图片上传的全部实现过程，总感觉自己的思路有些混乱，嗯，慢慢进步吧！

本文来自：http://www.q1010.com/173/10983-0.html

注：关于HTML5+Canvas+jQuery调用手机拍照功能实现图片上传简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：

您可能感兴趣的文章

上一篇：php医院网站简单示例

下一篇：【cms-v9】前台{pc}专题标签调用类分析简单示例