全国服务热线:4008-888-888

技术知识

H5启用照相机照相并缩小照片的案例编码

梳理文本文档,搜刮出1个H5启用照相机照相并缩小照片的案例编码,略微梳理精简1下做下共享。

情况

近期要做1个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>是1个可使用脚本制作在这其中绘图图型的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("只能鉴别照片!")
  }
});

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服