您所在的位置:首页 / 知识分享

上传图片的时候,ios手机的图片会旋转90°

2019.01.17

3341

男神苟毅

在html5中利用canvas对上传图片压缩的时候,ios手机竖着拍照时,图片会旋转90°,其他情况正常。


用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下,
用到了html5的 FileReader和Canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//此方法为file input元素的change事件
 functionchange(){
  varfile =this.files[0];
  varorientation;
  //EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js
  EXIF.getData(file,function(){
    orientation=EXIF.getTag(this,'Orientation');
  });
  varreader =newFileReader();
  reader.onload =function(e) { 
    getImgData(this.result,orientation,function(data){
      //这里可以使用校正后的图片data了
    });
  }
  reader.readAsDataURL(file);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法,返回校正方向后的base64
functiongetImgData(img,dir,next){
 varimage=newImage();
 image.onload=function(){
  vardegree=0,drawWidth,drawHeight,width,height;
  drawWidth=this.naturalWidth;
  drawHeight=this.naturalHeight;
  //以下改变一下图片大小
  varmaxSide = Math.max(drawWidth, drawHeight);
  if(maxSide > 1024) {
    varminSide = Math.min(drawWidth, drawHeight);
    minSide = minSide / maxSide * 1024;
    maxSide = 1024;
    if(drawWidth > drawHeight) {
      drawWidth = maxSide;
      drawHeight = minSide;
    }else{
      drawWidth = minSide;
      drawHeight = maxSide;
    }
  }
  varcanvas=document.createElement('canvas');
  canvas.width=width=drawWidth;
  canvas.height=height=drawHeight;
  varcontext=canvas.getContext('2d');
  //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式
  switch(dir){
    //iphone横屏拍摄,此时home键在左侧
    case3:
      degree=180;
      drawWidth=-width;
      drawHeight=-height;
      break;
    //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
    case6:
      canvas.width=height;
      canvas.height=width;
      degree=90;
      drawWidth=width;
      drawHeight=-height;
      break;
    //iphone竖屏拍摄,此时home键在上方
    case8:
      canvas.width=height;
      canvas.height=width;
      degree=270;
      drawWidth=-width;
      drawHeight=height;
      break;
  }
  //使用canvas旋转校正
  context.rotate(degree*Math.PI/180);
  context.drawImage(this,0,0,drawWidth,drawHeight);
  //返回校正图片
  next(canvas.toDataURL("image/jpeg",.8));
 }
 image.src=img;
}


相关新闻

微信运动彻底玩坏,可以抓出轨

2016.05.03

3873

不知不觉中,似乎朋友圈的好友都开始运动起来了,纷纷晒着微信运动排行榜,新用途来了!玩坏微信运动吧!

计算机视觉深度学习开源数据集

2021.01.07

3485

深度学习开源数据集