HTML5+Canvas는 휴대폰의 카메라 기능을 호출하여 이미지 업로드 기능을 구현합니다. (자세한 사진 및 텍스트는 다음 부분에서 설명)

이 글에서는 휴대폰 카메라 기능을 호출해 사진을 자세히 올리는 HTML5+Canvas를 주로 소개합니다. 관심 있는 친구들은 참고하시면 됩니다.

이전 글에서는 이에 대해서만 이야기했습니다. 프런트 엔드 작업, 이 기사에서는 특히 Java 백그라운드 처리에 대해 설명합니다. 프런트 엔드는 Base64로 인코딩된 이미지 데이터 정보를 Ajax를 통해 Java 배경에 제출한 다음 Java는 Base64 디코딩을 통해 이미지 데이터 정보를 수신하고 처리한 다음 이를 사용합니다. stream to 이미지 데이터 정보는 서버에 업로드되어 저장되며, 이미지의 경로 주소가 데이터베이스에 저장됩니다.

이 링크를 클릭하면 프론트 데스크에서 로컬 압축 업로드 처리 과정을 볼 수 있습니다.

HTML5+Canvas는 휴대폰 카메라 기능을 호출하여 이미지 업로드를 구현합니다. 기능(자세한 사진 및 텍스트 1부)

자, 더 이상 말도 안 되는 소리는 하지 말고 코드만 게시하세요.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!