Open ufologist opened 6 years ago
iOS 上传拍照图片由于有方向性, 会造成显示时图片的方向不对, 需要旋转一下
前端解决这个问题的思路
具体的实现库
后端解决这个问题的可以使用阿里云图片处理: 自适应方向
某些手机拍摄出来的照片可能带有旋转参数(存放在照片exif信息里面)。可以设置是否对这些图片进行旋转。默认是设置自适应方向 进行自适应方向旋转,要求原图的宽度和高度必须小于 4096。
某些手机拍摄出来的照片可能带有旋转参数(存放在照片exif信息里面)。可以设置是否对这些图片进行旋转。默认是设置自适应方向
进行自适应方向旋转,要求原图的宽度和高度必须小于 4096。
例如
http://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/auto-orient,1
x-oss-process=image/auto-orient,1
http://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/resize,w_4096/auto-orient,1
x-oss-process=image/resize,w_4096/auto-orient,1
注意: 很多浏览器(例如 Chrome)直接打开图片时默认都做了自适应方向的处理(IE 11 没有做图片自适应方向), 所以很容易给人错觉, 觉得图片本身是好的. 但当图片显示在 Web 页面中时, 例如在 img 标签或做为背景图片使用时, 图片的方向又是错误的.
img
PS: 阿里云图片处理可以查看图片的 EXIF 信息
例如: http://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/info
iOS 上传拍照图片由于有方向性, 会造成显示时图片的方向不对, 需要旋转一下
前端解决这个问题的思路
具体的实现库
后端解决这个问题的可以使用阿里云图片处理: 自适应方向
例如
注意: 很多浏览器(例如 Chrome)直接打开图片时默认都做了自适应方向的处理(IE 11 没有做图片自适应方向), 所以很容易给人错觉, 觉得图片本身是好的. 但当图片显示在 Web 页面中时, 例如在
img
标签或做为背景图片使用时, 图片的方向又是错误的.PS: 阿里云图片处理可以查看图片的 EXIF 信息
例如: http://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/info