H5调用相机拍照并压缩图片的实例代码


Posted in HTML / CSS onJuly 20, 2017

整理文档,搜刮出一个H5调用相机拍照并压缩图片的实例代码,稍微整理精简一下做下分享。

背景

最近要做一个h5的页面,主要功能就是调用相机拍照或者是相册选图并且把照片压缩转base64之后上传到后台服务器,然后服务器返回识别结果。

前端的主要功能点有:

  1. H5如何调用相机
  2. 图片如何压缩
  3. 图片转base64

H5调用相机/相册

调用相机最简单的方法就是使用input file[camera]属性:

<input type="file" capture=camera accept="image/*">//相机
<input type="file" accept="image/*">//相册

这个种方法兼容性还是有问题的,在iphone手机上可以正常打开相机,但是在安卓手机上点击之后是相机、图库、文件管理器等混合选择项。在网上搜了很多都没有什么好的解决办法,只能继续往下写了。。。

图片压缩

图片压缩就要用到FileReader<canvas>了。

FileReader对象允许Web应用程序异步读取存储在计算机上的文件的内容,使用File或Blob对象指定要读取的文件或数据。

<canvas>是一个可以使用脚本在其中绘制图形的HTML元素,可以绘制图形和简单的动画。

图片压缩要压缩图片的分辨率和质量,分辨率压缩我这里是设置了图片的最大边为800,另一边按照图片原有比例缩放,也可以设置图片整体的缩放比例。

var MAX_WH=800;
var image=new Image();
image.onload=function () {
  if(image.height > MAX_WH) {
    // 宽度等比例缩放 *= 
    image.width *= MAX_WH/ image.height;
    image.height = MAX_WH;
  }
  if(image.width > MAX_WH) {
    // 宽度等比例缩放 *= 
    image.height *= MAX_WH/ image.width;
    image.width = MAX_WH;
  }
}
image.src=dataURL;//dataURL通过FileReader获取

然后就是压缩图片的质量了,这里设置压缩了80%,如果设置太小图片就失真了。动态创建<canvas>标签然后压缩图片:

var quality=80;
var cvs = document.createElement('canvas');
cvs.width = image.width;
cvs.heigh = image.height;
var context=cvs.getContext("2d");
context.drawImage(image, 0, 0,image.width, image.height);
dataURL = cvs.toDataURL('image/jpeg', quality/100);

然后就是上传到服务器并展示服务器的结果啦,然而事情并没有那么顺利。。。ios手机拍照压缩之后图片莫名的旋转了,继续解决问题。

解决IOS图片旋转

首先引用exif.js,通过EXIF.getData和EXIF.getTag获取拍照方向信息。

//file通过input标签获取
EXIF.getData(file,function(){
  orientation=EXIF.getTag(file,'Orientation');
});

下面给出每个orientation值对应到iphone手机拍照的含义:

orientation 描述
3 iphone横屏拍摄,此时home键在左侧,图片相对于原始位置旋转了180度
6 iphone竖屏拍摄,此时home键在下方(正常拿手机的方向),图片相对于原始位置逆时针旋转可90度
8 iphone竖屏拍摄,此时home键在上方,图片相对于原始位置顺时针旋转了90度
获取图片的方向信息之后,根据获取到的值作相应的旋转操作。
switch (orientation) {
  case 6:
  case 8:
    cvs.width = height;
    cvs.height = width;
    break;
}
var context=cvs.getContext("2d");
switch(orientation){
  //iphone横屏拍摄,此时home键在左侧
  case 3:
  // 180度向左旋转
  context.translate(width, height);
  context.rotate(Math.PI);
  break;
  //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
  case 6:
  context.rotate(0.5 * Math.PI);
  context.translate(0, -height);
  break;
  //iphone竖屏拍摄,此时home键在上方
  case 8:
  // 逆时针旋转90度
  context.rotate(-0.5 * Math.PI);
  context.translate(-width, 0);
  break;
}

然后再上传图片,发现在IOS下图片已经正常了。

下面给出完整代码:

$('input[type=file]').change(function(e) {
  var file = this.files[0];
  var mime_type=file.type;
  var orientation=0;
  if (file && /^image\//i.test(file.type)) {
    EXIF.getData(file,function(){
      orientation=EXIF.getTag(file,'Orientation');
    });

    var reader = new FileReader();
    reader.onloadend = function () {
      var width,height;
      var MAX_WH=800;
      var image=new Image();
      image.onload=function () {
        if(image.height > MAX_WH) {
          // 宽度等比例缩放 *= 
          image.width *= MAX_WH / image.height;
          image.height = MAX_WH;
        }
        if(image.width > MAX_WH) {
          // 宽度等比例缩放 *= 
          image.height *= MAX_WH / image.width;
          image.width = MAX_WH;
        }
        //压缩
        var quality=80;
        var cvs = document.createElement('canvas');
        cvs.width = width = image.width;
        cvs.height =height = image.height;

        switch (orientation) {
          case 6:
          case 8:
            cvs.width = height;
            cvs.height = width;
            break;
        }

        var context=cvs.getContext("2d");

        //解决ios图片旋转问题 
        switch(orientation){
          //iphone横屏拍摄,此时home键在左侧
          case 3:
          // 180度向左旋转
          context.translate(width, height);
          context.rotate(Math.PI);
          break;
          //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
          case 6:
          context.rotate(0.5 * Math.PI);
          context.translate(0, -height);
          break;
          //iphone竖屏拍摄,此时home键在上方
          case 8:
          // 逆时针旋转90度
          context.rotate(-0.5 * Math.PI);
          context.translate(-width, 0);
          break;
        }
        context.drawImage(image, 0, 0,image.width, image.height);
        dataURL = cvs.toDataURL('image/jpeg', quality/100);
        //获取识别结果
        ...
      }
      image.src=dataURL;
    };
    reader.readAsDataURL(file);
  }else{
    alert("只能识别图片!")
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 #HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 #HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 #HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 #HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 #HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 #HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 #HTML / CSS
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
np.dot()函数的用法详解
2020/01/17 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
投资合作协议书范本
2014/04/17 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
公司催款律师函
2015/05/27 职场文书
法定代表人资格证明书
2015/06/18 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang