HTML5+Canvas呼叫手機拍照功能實現圖片上傳功能（圖文詳解下篇）

這篇文章主要為大家詳細介紹了HTML5+Canvas調用手機拍照功能實現圖片上傳，具有一定的參考價值，有興趣的小伙伴們可以參考一下

上一篇只講到前台操作，這篇專門涉及到Java後台處理，前台透過Ajax提交將Base64編碼過的圖片資料資訊傳到Java後台，然後Java這邊進行接收處理，透過對圖片資料資訊進行Base64解碼，之後使用串流將圖片資料資訊上傳至伺服器進行儲存，並將圖片的路徑位址存進資料庫。

大家可以點此連結查看前臺本地壓縮上傳的處理：

HTML5+Canvas呼叫手機拍照功能實現圖片上傳功能（圖文詳解上篇）

ok，廢話不多說了，直接貼程式碼吧。

1、前台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、後台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编码过的图片数据信息，对字节数组字符串进行Base64解码 
    String imgPath = uploadFile(fileData,liceneName);//进行文件上传操作，上传到服务器中存放（这里是上传到服务器项目文件夹中存到） 
     
    boolean result = false;//最终上传成功与否的标志 
     
    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){ 
      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);//执行状态保存操作 
    } 
     
    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){ 
    //在自己的项目中构造出一个用于存放用户照片的文件夹 
    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(); 
    } 
     
    log.info("====文件保存的位置："+imgPath); 
     
    //使用BASE64对图片文件数据进行解码操作 
    BASE64Decoder decoder = new BASE64Decoder(); 
    try { 
      //通过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 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; 
  }

好了，到這裡就全部結束了，這就是HTML5+jQuery+Canvas調用手機拍照功能實現圖片上傳的全部實現過程，總感覺自己的思路有些混亂，嗯，慢慢進步吧！

以上是HTML5+Canvas呼叫手機拍照功能實現圖片上傳功能（圖文詳解下篇）的詳細內容。更多資訊請關注PHP中文網其他相關文章！