HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(下)
上一篇只講到前臺(tái)操作,這篇專門涉及到Java后臺(tái)處理,前臺(tái)通過Ajax提交將Base64編碼過的圖片數(shù)據(jù)信息傳到Java后臺(tái),然后Java這邊進(jìn)行接收處理,通過對(duì)圖片數(shù)據(jù)信息進(jìn)行Base64解碼,之后使用流將圖片數(shù)據(jù)信息上傳至服務(wù)器進(jìn)行保存,并且將圖片的路徑地址存進(jìn)數(shù)據(jù)庫。
大家可以點(diǎn)此鏈接查看前臺(tái)本地壓縮上傳的處理:
HTML5+Canvas+jQuery調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(上)
ok,廢話不多說了,直接貼代碼吧。
1、前臺(tái)js代碼:
$.ajax({ 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-urlencoded; 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、后臺(tái)Java代碼
/** * 證件上傳 * @param request * @param response * @throws IOException */ public void uploadLicence(HttpServletRequest request,HttpServletResponse response) throws IOException{ log.info("=====================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編碼過的圖片數(shù)據(jù)信息,對(duì)字節(jié)數(shù)組字符串進(jìn)行Base64解碼 String imgPath = uploadFile(fileData,liceneName);//進(jìn)行文件上傳操作,上傳到服務(wù)器中存放(這里是上傳到服務(wù)器項(xiàng)目文件夾中存到) boolean result = false;//最終上傳成功與否的標(biāo)志 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);//保存路徑 //判斷數(shù)據(jù)庫中的路徑是否存在,并且文件夾中的文件是否存在(判斷是否上傳成功的標(biāo)志) boolean is_success = isSuccessUpload(licenceName, cust_tax_code, phoneNum); if(save_flag && is_success){ result = true; } //如果證件上傳成功,則記錄到記錄表中 if(result){ StateRecordInfo record = new StateRecordInfo(); record.setCust_tax_code(cust_tax_code); record.setPhonenum(phoneNum); record.setState_id(state_id); saveStateRecord(record);//執(zhí)行狀態(tài)保存操作 } System.out.println("===result:"+result); PrintWriter pw = response.getWriter(); pw.print(result); pw.close(); }
/** * 文件上傳 * @param fileData * @param fileName * @return */ public String uploadFile(String fileData,String fileName){ //在自己的項(xiàng)目中構(gòu)造出一個(gè)用于存放用戶照片的文件夾 String imgPath = this.getServletContext().getRealPath("/uploads/"); //如果此文件夾不存在則創(chuàng)建一個(gè) File f = new File(imgPath); if(!f.exists()){ f.mkdir(); } //拼接文件名稱,不存在就創(chuàng)建 imgPath = imgPath + "/" + fileName + ".jpg"; f = new File(imgPath); if(!f.exists()){ f.mkdir(); } log.info("====文件保存的位置:"+imgPath); //使用BASE64對(duì)圖片文件數(shù)據(jù)進(jìn)行解碼操作 BASE64Decoder decoder = new BASE64Decoder(); try { //通過Base64解密,將圖片數(shù)據(jù)解密成字節(jié)數(shù)組 byte[] bytes = decoder.decodeBuffer(fileData); //構(gòu)造字節(jié)數(shù)組輸入流 ByteArrayInputStream bais = new ByteArrayInputStream(bytes); //讀取輸入流的數(shù)據(jù) BufferedImage bi = ImageIO.read(bais); //將數(shù)據(jù)信息寫進(jìn)圖片文件中 ImageIO.write(bi, "jpg", f);// 不管輸出什么格式圖片,此處不需改動(dòng) bais.close(); } catch (IOException e) { log.error("e:{}",e); } return imgPath; }
/** * 判斷是否成功上傳 * @return */ public boolean isSuccessUpload(String licenceName,String cust_tax_code,String phonenum){ boolean flag = false; 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()){ flag = true; } return flag; }
好了,到這里就全部結(jié)束了,這就是HTML5+jQuery+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳的全部實(shí)現(xiàn)過程,總感覺自己的思路有些混亂,嗯,慢慢進(jìn)步吧!
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實(shí)現(xiàn)
- javascript結(jié)合canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)效果
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫特效
- HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(上)
- 用canvas 實(shí)現(xiàn)個(gè)圖片三角化(LOW POLY)效果
- HTML5 canvas 9繪制圖片實(shí)例詳解
- Canvas + JavaScript 制作圖片粒子效果
- canvas實(shí)現(xiàn)圖片根據(jù)滑塊放大縮小效果
- canvas壓縮圖片轉(zhuǎn)換成base64格式輸出文件流
- 一步步教你利用Canvas對(duì)圖片進(jìn)行處理
相關(guān)文章
微信小程序?qū)崿F(xiàn)根據(jù)日期和時(shí)間排序功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)根據(jù)日期和時(shí)間排序功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析
這篇文章主要介紹了JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο罄^承功能的5種常見實(shí)現(xiàn)方法原理與操作技巧,需要的朋友可以參考下2018-07-07微信小程序如何在頁面跳轉(zhuǎn)時(shí)進(jìn)行頁面導(dǎo)航
小程序能夠在不同的頁面進(jìn)行跳轉(zhuǎn)切換,路由起到了至關(guān)重要的作用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何在頁面跳轉(zhuǎn)時(shí)進(jìn)行頁面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2022-09-09webuploader實(shí)現(xiàn)上傳圖片到服務(wù)器功能
這篇文章主要為大家詳細(xì)介紹了webuploader實(shí)現(xiàn)上傳圖片到服務(wù)器功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08DataTables添加額外的查詢參數(shù)和刪除columns等無用參數(shù)實(shí)例
下面小編就為大家?guī)硪黄狣ataTables添加額外的查詢參數(shù)和刪除columns等無用參數(shù)實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07