关于微信端调用图片上传遇到的兼容性问题…… 最近工作上多了好些关于兼容性的问题，让人头炸>-<有一个在手机端调用相机的

最近工作上多了好些关于兼容性的问题，让人头炸 > - < 有一个在手机端调用相机的问题，连续跟踪差不多一个月，将遇到问题和大家分享一下

1、首先是微信上上传照片要求既能唤起相册也能唤起相机类似图如下

因为产品反映部分机型无法调用拍照功能

然后对input进行了分析

平常普通使用的input 类似

 <input accept="image/*" >

但是对某些不兼容的机型就需要强制唤起相机类似如下

 <input accept="image/*" capture="camera">

由于不兼容的手机还没找到他们的内核规律，所以只能单个手机类型进行分辨，代码如下

let u = navigator.userAgent; 
let AndroidArr = ['HUAWEIEML-AL00', 'HUAWEIELE-AL00'];
let getIndex = AndroidArr.findIndex((item) => {    return u.indexOf(item) > -1;});
let isAndroidLow = getIndex>-1? true : false

根据参数 isAndroidLow 如果为true 就是不兼容的机型选择第二种

唤起手机相机兼容问题大致解决啦

2、第二个问题接踵过来关于苹果手机兼容性问题

苹果手机升级换代，系统升级，导致以前图片翻转问题在高版本上无需人工解决

关于iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案

可以查看文章 www.jianshu.com/p/ad4501db1…

说的相当的详细

对于这个问题就是要判断ios版本当版本高的时候默认不处理就行

3、微信端一直调用相机出现页面强制刷新问题

在低版本的ios上出现了微信内一直反复调用相机结果页面被刷新的情况

在测这个问题的时候发现 antd-mobile 没有出现

于是就去看 antd-mobile 图片上传插件

在网上的大佬的指点下

看到了一篇关于 orientation 如何获取的文章

文章地址如下

https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side

经过反复测试发现引入exif 去获取 orientation 会导致微信内存过大页面强制刷新

获取orientation 根据上述文章可以使用原生方法进行获取

代码如下

export const getOrientation = (file, callback) => {
 var reader = new FileReader();
 reader.onload = (event) => {
   if (! event.target) {
     return;
   }
   const file = event.target;
   const view = new DataView(file.result);
   if (view.getUint16(0, false) != 0xFFD8) {   
     return callback(-2);
   }
   const length = view.byteLength
   let offset = 2;
   while (offset < length) {
     if (view.getUint16(offset+2, false) <= 8) 
       return callback(-1);
       let marker = view.getUint16(offset, false);
       offset += 2; 
       if (marker == 0xFFE1) {
       if (view.getUint32(offset += 2, false) != 0x45786966) {
         return callback(-1);
       }
       let little = view.getUint16(offset += 6, false) == 0x4949;
       offset += view.getUint32(offset + 4, little);        
       let tags = view.getUint16(offset, little);  
       offset += 2;
       for (let i = 0; i < tags; i++) {              
         if (view.getUint16(offset + (i * 12), little) == 0x0112) {        
          return callback(view.getUint16(offset + (i * 12) + 8, little));              
         }            
       }          
      } else if ((marker & 0xFF00) != 0xFF00) {       
       break;          
      }          
      else {        
       offset += view.getUint16(offset, false);        
      }      
    }     
    return callback(-1);   
  };      
  reader.readAsArrayBuffer(file);
}

使用上述方法代替 exif 就避免了微信调用相机多次页面刷新问题

希望对遇到手机相机调用兼容性的问题的你有所帮助啦～

关于微信端 调用图片上传遇到的兼容性问题……

关于微信端调用图片上传遇到的兼容性问题……