文档章节

HTML5 实现手机拍照上传

Reya滴水心
 Reya滴水心
发布于 2016/06/24 14:18
字数 1517
阅读 17804
收藏 294
点赞 31
评论 22

背景:移动端H5项目,需要实现调用手机拍照,并将图片压缩上传功能。

  1. 页面样式:
    1. 上传图片有原生的方法<input type="file" accept="image/*">,如果只想要拍照上传,不希望用户选择图片上传,可以通过添加capture属性,该属性值有camcorder/microphone/camera...,此处选择camera。PS:该属性存在浏览器兼容性问题,不是所有的浏览器都支持。
      <input type="file" accept="image/*" capture="camera" >
    2. 因为原生file样式不满足要求,需要进行相应的处理,此时使用定位,在input上面放置我们想要的页面效果。然后当点击上面的元素,就可以触发我们的input进行图片上传。此时的问题是:当点击input上面的元素,需要事件穿透,即相当于点击input。则借助于css3新属性pointer-events。
      //使用cursor进行事件穿透,来阻止元素成为鼠标事件的目标
      button{
           cursor:pointer;
           pointer-events:none;
      }
      

      ----此时图片上传的样式已经处理好了----

      代码片段:
      <style >
          *{
              padding: 0;
              margin: 0;
          }
          .wrapper{
              width: 320px;
              height: 50px;
              margin: 20px auto;
              position: relative;
              border: 1px solid #f0f0f0;
          }
          input{
              width: 100px;
              height: 30px;
          }
          button{
              position: absolute;
              cursor: pointer;
              pointer-events: none;
              width: 100px;
              height: 30px;
              left: 0;
              top: 0;
          }
          a{
              pointer-events: none;
          }
          .img{
              border: 1px solid #ccc;
              padding: 10px;
          }
      </style >
      
      <div class = "wrapper">
           <input type = "file" accept= "image/*" capture= "camera" id= "img" />
           <button >上传照片 </button >
      </div >
      
  2. 图片压缩处理:
    1. 因为要做的是手机拍照上传,现在的手机拍照片都很大,比如小米4S,大小在3M以上,如果原图上传,太消耗用户流量,于是要解决图片压缩的问题。
    2.   通过change事件,监听图片上传,通过readerAsDataURL获取上传的图片。

      document.getElementById( 'img').addEventListener( 'change', function () {
           var reader = new FileReader();
           reader.onload = function (e) {
                //调用图片压缩方法:compress();
           };
           reader.readAsDataURL(this.files[0]);
           console.log(this.files[0]);
           var fileSize = Math.round( this.files[0].size/1024/1024) ; //以M为单位
           //this.files[0] 该信息包含:图片的大小,以byte计算 获取size的方法如下:this.files[0].size;
      }, false);
      
    3.   对上传的图片进行压缩,需要借助于canvas API,调用其中的canvas.toDataURL(typeencoderOptions); 将图片按照一定的压缩比进行压缩,得到base64编码。重点来了:压缩策略:先设置图片的最大宽度 or 最大高度,一般设置其中一个就可以了,因为所有的手机宽高比差别不是很大。然后设置图片的最大size,allowMaxSize,根据图片的实际大小和最大允许大小,设置相应的压缩比率。

      //最终实现思路:
      1、设置压缩后的最大宽度 or 高度;
      2、设置压缩比例,根据图片的不同size大小,设置不同的压缩比。
      
      function compress(res,fileSize) { //res代表上传的图片,fileSize大小图片的大小
          var img = new Image(),
              maxW = 640; //设置最大宽度
      
          img.onload = function () {
              var cvs = document.createElement( 'canvas'),
                  ctx = cvs.getContext( '2d');
      
              if(img.width > maxW) {
                  img.height *= maxW / img.width;
                  img.width = maxW;
              }
      
              cvs.width = img.width;
              cvs.height = img.height;
      
              ctx.clearRect(0, 0, cvs.width, cvs.height);
              ctx.drawImage(img, 0, 0, img.width, img.height);
      
              var compressRate = getCompressRate(1,fileSize);
      
              var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);
      
              document.body.appendChild(cvs);
              console.log(dataUrl);
          }
      
          img.src = res;
      }
      
      function getCompressRate(allowMaxSize,fileSize){ //计算压缩比率,size单位为MB
            var compressRate = 1;
      
            if(fileSize/allowMaxSize > 4){
                 compressRate = 0.5;
            } else if(fileSize/allowMaxSize >3){
                 compressRate = 0.6;
            } else if(fileSize/allowMaxSize >2){
                 compressRate = 0.7;
            } else if(fileSize > allowMaxSize){
                 compressRate = 0.8;
            } else{
                 compressRate = 0.9;
            }
      
            return compressRate;
      }
      
  3. 图片上传给服务器:
    1. 图片已经压缩完成了,但是压缩后的图片不是File,而是一个base64编码,于是乎两个选择:1、以String的形式将base64编码上传给服务器,服务器转存base64为img图片;2、前端将base64转为File图片类型,上传给服务器。
    2. 方法一:压缩之后直接上传base64给后台,实现简单。
    3. 方法二:前端自己转存base64位File图片,这个对于前端 压力比较大。

      原因:html5 canvas属于客户端API,没有权限去保存图片到硬盘,只有canvas.toDataURL()这一接口可导出画布的base64编码,以提供给服务器进行处理保存。所以如果要将base64编码转成图片需要借助于nodeJs。因为nodeJS有相关文件处理的API。

      //使用nodeJS将base64转化成图片
      var express = require('express');
      var fs = require("fs");
      var app = module.exports = express();
      
      function dataToImage(dataUrl){
          var base64Data = dataUrl.replace(/^data:image\/\w+;base64,/,'');
          var dataBuffer = new Buffer(base64Data,'base64');
      
          fs.writeFile('out.jpg',dataBuffer,function(err){
              if(err){
                  console.log(err);
              }else{
                  console.log('Success...');
              }
          });
      }
      
      dataToImage('data:image/jpeg;base64,/9...'); //图片完整base64过长,所以省略...
      
      if(!module.parent){
          app.listen(8000);
          console.log('Express started on port 8000');
      }
      

      Summary:如果使用nodeJS,需要单独部署nodeJS代码到服务器,整个逻辑会比较麻烦。综合比较两种方法,推荐使用第一种方法,直接传base64给服务器,后台处理相应的转化!

demo: http://www.zhangyixia.com/image-upload/  

可直接扫描二维码:
                               

相关知识科普:

  1. 图像一般由两部分组成:一部分是数据本身,他记录了每个像素的颜色值,另一部分是文件头,这里记录着形如图像的宽度,高度等信息。
  2. 不同图片类型及适用场景:
    1. 不同图片类型:
      1. GIF:无损压缩,体积小,支持透明效果,缺点:色彩效果最低,用gif保存鲜艳的图片的话会让网站看上去非常可怕。
      2. PNG:无损压缩,可渐变透明,缺点:不如JPG颜色丰富,同样的图片体积也比JPG略大。
      3. JPG/JPEG:色彩还原性好,可以在照片不明显失真的情况下,大幅度压缩图片格式,所以体积不会很大。缺点:不支持透明
    2. 适用场景:
      1. 当图片色彩鲜艳,基本没有透明效果的时候,选择jpg/jpeg。
      2. 当图片色彩鲜艳,透明效果较多的情况下,选择png;
      3. 当图片色彩比较单一情况下,可以选择gif;
  3. toDataURL,查找原生压缩图片的方法。type支持image/webp格式
    canvas.toDataURL(type, encoderOptions);
  4. Base64编码:将三个8Bit的字节转换为四个6Bit的字节。

 

参考资料:

http://www.imys.net/20150916/webapp-input-use-camera.html

http://www.oxxostudio.tw/articles/201409/pointer-events.html

https://segmentfault.com/a/1190000005364299

© 著作权归作者所有

共有 人打赏支持
Reya滴水心
粉丝 38
博文 88
码字总数 31966
作品 0
深圳
前端工程师
加载中

评论(22)

s
szygb
HTML5 实现手机拍照上传完整代码能发我邮箱吗?228619800@qq.com
八粥php
八粥php
能录像吗??
hhcat
hhcat
这个方案可以滴!我就是用此办法,图片可以无限张数,每张图片处理好大小,1200px的照片也就是180-200K,可以接受。
Reya滴水心
Reya滴水心

引用来自“JohnnieFucker”的评论

微信上ios可以,安卓只能选图片不能呼出照相机。
主要看你使用的是什么手机,我这边使用的小米4S,微信最新版本,可以正常操作。需要注意的是:微信Android调起来的应该既有相机,又有图库...,需要专门点击相机。也就是需要两步操作!
J
JohnnieFucker
微信上ios可以,安卓只能选图片不能呼出照相机。
x7LoveLin
x7LoveLin
不错。 可以提供参考
Reya滴水心
Reya滴水心

引用来自“采女孩的小蘑菇”的评论

微信游览器不行

我这边Android,IOS微信测试都OK,具体可以提供一下你使用机器型号以及微信版本号
一位极其不愿意透漏姓名的马先生
一位极其不愿意透漏姓名的马先生
微信游览器不行
南漂一卒
南漂一卒

引用来自“Riya滴水心”的评论

引用来自“_Elvis”的评论

客户端图片压缩有个烦人的问题,就是iPhone拍的图片的方向是存在exif里的,不知道博主是否考虑过?

引用来自“Riya滴水心”的评论

这个问题我也遇见了,竖向图片会逆时针旋转90°横向显示,但是对产品影响不大,所以暂时未进行处理!有时间可以探讨一下

引用来自“_Elvis”的评论

http://www.jqueryscript.net/demo/jQuery-Plugin-for-Client-Side-Image-Resizing-canvasResize/
可以用这个库
63有时间去试试,谢啦~

http://code.ciaoca.com/javascript/exif-js/
Reya滴水心
Reya滴水心

引用来自“房一飞”的评论

自动对焦怎么实现
自动聚焦,这个前端目前不能实现。可是我觉得基本上也不需要自动聚焦呀,你在怎样的业务场景下要用到?
HTML5定稿一周年,你必须要重新认识HTML5了

作者简介:王安,DCloud CEO,HTML5产业专家,W3C会员。 去年此时,W3C定稿了HTML5。我曾发表一篇文章《HTML 5终于定稿,为什么原生App世界将被颠覆》,这文章转载量很大,它阐述了HTML5的来...

SomaLihq
06/27
0
0
HTML5 Video/Canvas拍照初级

通过HTML5 Video和Canvas实现拍照的功能,功能很简单;另外,因为用到了getUserMedia()函数,目前只能在Chrome和Opera里使用,详见:Can I use getUserMedia/Stream API? 演示地址:HTML5 W...

Xiaopeng
2012/10/30
0
1
HTML5从入门到精通,零基础学员必看

学习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些? 1. HTML5可以同时在多种...

课工场CC老师
2017/11/08
0
0
初识html5 File API实现带有进度提示的文件上传

Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipart/form-data,但是需要修改服务器...

miscellanea
2014/06/27
0
3
Nodejs express、html5实现拖拽上传

Nodejs express、html5实现拖拽上传 一、前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题...

james_laughing
2015/06/02
0
0
使用HTML5构建下一代的Web Form

作者 蒋博 发布于 2009年6月22日 上午4时52分 HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 发起的,最开始的名称叫做Web Application 1.0,而后这个标准吸纳了...

晨曦之光
2012/03/09
0
0
关于“HTML5 的未来 - HTML5 还能走多远”一文的一些看法

关于“HTML5 的未来 - HTML5 还能走多远”一文的一些看法   读了“HTML5 的未来 - HTML5 还能走多远”一文,觉得有些观点有失偏颇,可能会误导很多人,造成很多错误理解,必须纠正一些错误...

gaowenli
2013/02/04
0
0
利用HTML5分片上传超大文件

在网页中直接上传大文件一直是个比较头疼的问题,主要面临的问题一般包括两类:一是上传时间长中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主...

miscellanea
2014/09/22
0
0
HTML5定稿了,为什么原生App世界将被颠覆

2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿。 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界...

程序袁_绪龙
2015/01/05
0
0
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
12
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
1
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
1
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部