怎样使图片不旋转,怎么才能让图片不自动旋转

首页 > 实用技巧 > 作者:YD1662023-04-25 02:48:04

需求背景

用户需要上传图片,然后前端将这张图片绘制到canvas画布上,然后生成base64展示给用户,这里需要其他操作,所以需要使用canvas,而不是直接用fileReader。

出现的问题

在电脑上,我们进行代码编写的时候,在chrome上进行调试的时候没有问题,但是一旦在手机上测试就发现图片进行了旋转,不同的拍摄角度图片旋转的角度也不一样,如横拍,竖拍,倒着拍。具体代码如下:

怎样使图片不旋转,怎么才能让图片不自动旋转(1)

具体表现为,这是我们上传的图片

怎样使图片不旋转,怎么才能让图片不自动旋转(2)

是正向的,但是发现展示在canvas画布中的图片为

怎样使图片不旋转,怎么才能让图片不自动旋转(3)

图片在原有的基础上逆时针旋转了90°

问题原理分析

在手机中默认横排才是正确的拍照姿势,如果我们手机竖着拿然后逆时针旋转90°这才是正确的拍照姿势,这时候拍出来的照片展示在canvas中是不会被旋转的。如果以其他角度拍搜时,就会发生旋转。 这时候就需要知道用户上传的图片是什么角度拍摄的

一般来说上传的图片有这么几种情况分别旋转0°、90°、180°、270°,所以需要对各种情况进行处理

解决方案

npm上有有一个包叫exif,他可以获取到上传图片的旋转角度,具体使用方法可参考文档,下面是我们的解决方案

怎样使图片不旋转,怎么才能让图片不自动旋转(4)

首页 123下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.