当前位置:首页 > 解决上传图片,图片会旋转的问题,竖屏拍摄的图片上传之后会变成横向的

解决上传图片,图片会旋转的问题,竖屏拍摄的图片上传之后会变成横向的

发布于 2周前 阅读 14 次 Canvas Javascript

背景

最近写了一个功能,用到canvas的绘制图片功能drawImage()。
在绘制图的时候发现有的图片绘制出来和我们想象的并不一样。
比如下面左图是我们预览图片的样子,右图是绘制在canvas上的样子:

后来试了好多图片,发现手机(这里只测试了iphone,据说安卓没有这个问题)拍摄的照片,竖拍的时候会有这个问题,横拍的会正常显示。所以我就想是否可以获取到图片的旋转角度然后再用js给它倒转回去呢,查阅了一些相关资料,发现github上exif这个插件。
下面简要说下用法,具体大家可以去github细看:

1.npm安装和使用:

  1. npm i exif-js --save
  1. import EXIF from 'exif-js';
  1. let file = e.target.files[0];
  2. let rotate = 0;
  3. //file是上传图片的时候获取到的file对象
  4. EXIF.getData(file, function() {
  5. orientation = this.exifdata.Orientation;
  6. switch(orientation){
  7. case 8:
  8. rotate = (90*Math.PI/180);
  9. break;
  10. case 3:
  11. rotate = (180*Math.PI/180);
  12. break;
  13. case 6:
  14. rotate = (-90*Math.PI/180);
  15. break;
  16. }
  17. })

官方也提供了cdn引入的方法:

  1. <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

用到的插件exif

https://github.com/exif-js/exif-js