技术文章
当前位置:首页 > Javascript技术文章 > HTML5+Canvas调用手机拍照功能实现图片上传

HTML5+Canvas调用手机拍照功能并实现上传

  • 发布时间:
  • 作者:码农之家原创
  • 点击:175

这篇文章主要知识点是关于HTML5、Canvas、手机拍照、图片上传、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

从零开始学HTML5+CSS3
  • 类型:Web应用大小:175.4 MB格式:PDF出版:机械工业出版社作者:胡晓霞
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

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

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

大家可以点此链接查看前台本地压缩上传的处理:

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(上)

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调用手机拍照功能实现图片上传的全部实现过程,总感觉自己的思路有些混乱,嗯,慢慢进步吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到javascript的写法总结、 webpack 2的react开发配置详解、 js实现方块上下左右移动效、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:js的变量提升和函数提升知识点总结

下一篇:JavaScript使用atan2绘制箭头和曲线的方法详解

展开 +

收起 -

Canvas调用 相关电子书
Canvas调用 学习笔记
网友NO.133757

js HTML5 canvas绘制图片的方法

本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下 demo.js window.onload=function() { createcanvas(); drawImage();} function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img=new Image(); img.onload=function() { context.drawImage(img,0,0,200,200 ); } img.src="img5.jpg";} demo.html !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titlecanvas/title script type="text/javascript" src="demo.js"/script/headbody canvas id="mycanvas" width="400" hight="400" span你的浏览器不支持canvas/span/canvas /body/html 图片: 效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

网友NO.954898

使用canvas及js简单生成验证码方法

在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是 : 1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证码 结构与样式: canvas id="mycanvas" width='90' height='40' 您的浏览器不支持canvas,请换个浏览器试试~/canvasstyle#mycanvas{ cursor: pointer;}/style 下面来编写js代码: /*生成4位随机数*/ function rand(){ var str="abcdefghijklmnopqrstuvwxyz0123456789"; var arr=str.split(""); var validate=""; var ranNum; for(var i=0;i4;i++){ ranNum=Math.floor(Math.random()*36); //随机数在[0,35]之间 validate+=arr[ranNum]; } return validate; } /*干扰线的随机x坐标值*/ function lineX(){ var ranLineX=Math.floor(Math.random()*90); return ranLineX; } /*干扰线的随机y坐标值*/ function lineY(){ var ranLineY=Math.floor(Math.random()*40); return ranLineY; } function clickChange(){ var m……

网友NO.467777

原生JS+Canvas实现五子棋游戏实例

一、功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二、代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i 15; i++){ context.moveTo(15 + i * 30 , 15); context.lineTo(15 + i * 30 , 435); context.stroke(); context.moveTo(15 , 15 + i * 30); context.lineTo(435 , 15 + i * 30); context.stroke(); } } 知道格子数后,我们先看五子棋有多少种赢法: //赢法数组 var wins = []; for(var i = 0; i 15; i++){ wins[i] = []; for(var j = 0; j 15; j++){ wins[i][j] = []; } } var count = 0; //赢法总数 //横线赢法 for(var i = 0; i 15; i++){ for(var j = 0; j 11; j++){ for(var k = 0; k 5; k++){ wins[i][j+k][count] = true; } count++; } } //竖线赢法 for(var i = 0; i 15; i++){ for(var j = 0; j 11; ……

网友NO.646873

js canvas实现橡皮擦效果

本文实例为大家分享了canvas实现橡皮擦效果的具体代码,供大家参考,具体内容如下 html部分 !DOCTYPE htmlhtmlheadmeta http-equiv="Content-Type" content="text/html" charset="utf-8" /meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" / titleMy Canvas 0.1/titlestyle type="text/css"html,body,div,img{ margin:0; padding:0;}a,a:hover{ text-decoration:none;}.background{ width:100%; position:fixed; top:0; left:0;}/style/head bodyimg src="images/background.png" class="background resizeContainer"/div id="J_cover" class="resizeContainer"/divscript type="text/javascript" src="js/zepto.js"/scriptscript type="text/javascript" src="js/lottery.js"/scriptscript type="text/javascript"var canvas = { init : function(){ var self = this; var node = document.getElementById('J_cover'), canvas_url = 'images/cover.png', type = 'image'; var lottery = new Lottery(node, canvas_url, type, window_w, window_h, self.callback); lottery.……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息