解决H5 IOS手机图片上传时图片会旋转90°问题

Vant 官方给出的解答需要自己解决，没有处理。

解决办法主要使用了 compressorjs 插件库

一、Vant UI库Uploader 组件图片上传：

<van-uploaderv-model="fileList":after-read="afterRead":before-read="beforeRead"/>
import ImageCompressor from "image-compressor.js";
beforeRead(file) {return new Promise((resolve) => {new ImageCompressor(file, {quality: 0.6,success: resolve,error(err) {console.log(err.message);},});});},

二、compressorjs的安装使用

1、安装

npm install image-compressor.js

2、使用格式

file代表要压缩的图片，类型file或blob。
options可选的一些操作。checkOrientation指示是否读取图像的Exif方向值(仅为JPEG图像)，然后使用该值自动旋转或翻转图像，默认true。quality可设置压缩质量，默认为1

new ImageCompressor(file,[options])

3、测试结果

ImageCompressor将file转成了blob格式，接口只支持file。需要做转换。
拍照后从相册上传图片不再旋转，直接拍照上传仍会旋转90°。（iPhone13 pro、13 pro max机型，其他未知）

4、最终方案

data(){
checkOrientation:true
},
created(){
let navigatorUserAgent = navigator.userAgent.match(/CPU iPhone OS (.*?) like Mac OS/);// console.log(navigator.userAgent.match(/CPU iPhone OS (.*?) like Mac OS/));// 当iPhone OS 11_0 >=13的版本时，设置checkOrientation: false；反之设置checkOrientation: true, 检查if (navigatorUserAgent) {let edition = navigatorUserAgent[1].split("_")[0];~~edition >= 13? (this.checkOrientation = false): (this.checkOrientation = true);}
},
methods:{
// 解决手机拍照时图片会旋转问题beforeRead(file) {if (file.type.indexOf("image") == "-1") {return file;}return new Promise((resolve) => {// compressorjs 默认开启 checkOrientation 选项// 会将图片修正为正确方向 Compressornew ImageCompressor(file, {quality: 0.6,checkOrientation: this.checkOrientation,success(res) {res = new File([res], res.name, {type: res.type,lastModified: Date.now(),});resolve(res);},error(err) {console.log(err.message);},});});},
}

5、回测待定

解决H5 IOS手机图片上传时图片会旋转90°问题相关推荐

【报错笔记】关于图片上传时的路径问题
在图片上传时将图片上传到本地磁盘后如下将图片保存到了D盘下因此在jsp页面中读取对应图片时,需要在tomcat中配置相关信息. 在jsp页面中图片路径src中使用虚拟路径加数据库中图片名称就可以将 ...
【报错笔记】在做图片上传时上传图片后可以跳转到上传成功界面，也没有报错，数据库中也传入了值，可是eclipse中webapp下怎样都无法生存目录。
在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录. 我使用UUID生成8级目录,在webapp下创建目录,将图片传进 ...
[html] 图片上传时实现本地预览功能的原理是什么？
[html] 图片上传时实现本地预览功能的原理是什么? 通过HTML5 File API读取用户上传的图片,生成一个image对象显示到页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
php 更改图片后缀名,PHP在图片上传时如何改变图片后缀为jpg
PHP在图片上传时改变图片后缀为jpg的方法:首先获取上传的图片后缀,并获取图片在电脑上的临时存储位置:然后获取临时存储文件的后缀:最后实现后缀转换,代码为[case 'im{ / S # p |ag ...
菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析说明一.图片路径分析二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结四.更新配置文件说明更新时间:202 ...
通过url链接将图片上传oss图片显示不完整问题
通过url链接将图片上传oss图片显示不完整问题问题:在之前通过链接上传图片的时候,都是先获取inputStream流,然后通过available()方法获取文件大小.但是通过这种方法获取到的文件大 ...
java 图片服务器上传_Java实现把图片上传到图片服务器(nginx+vsftp)
前言: 在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器(请参考nginx + vsftp搭建图片服务器),并且用vsftp的客户端工具filezilla测试过已经可用.但是在 ...
python修改图片大小为30kb_Python的Tornado框架实现图片上传及图片大小修改
图片的上传上传图片使用了表单提交, 下面是html部分, enctype="multipart/form-data"表示不对字节进行编码,上传文件类型时需指定. input标签的 ...
springboot实现图片上传和图片删除
图片上传主要将需要上传的图片上传到对应的存储地址当中,再通过url访问图片就可以了:本文存储地址在本地,如果是在服务器上,配置服务器端的地址就可以了. controller @ApiOperation ...

解决H5 IOS手机图片上传时图片会旋转90°问题

解决H5 IOS手机图片上传时图片会旋转90°问题

一、Vant UI库Uploader 组件图片上传：

二、compressorjs的安装使用

1、安装

2、使用格式

3、测试结果

4、最终方案

5、回测待定

解决H5 IOS手机图片上传时图片会旋转90°问题相关推荐

最新文章

热门文章