项目场景：

使用uniapp开发移动端小程序的时候,再安卓机上出现了一个小bug,用户在上传照片的时候,部分安卓机会自动旋转90度

注意事项,此项尤为重要!!!

在借助exif.js时,缩略图获取不到额外属性,也不会出现无故旋转的问题,安卓不勾选上传原图就不会出现此问题!若是非要上传原图将自动旋转复原,在测试时要注意自己的测试照片是否是缩略图,缩略图图片状态是unidefind!
可以在http://www.wetools.com/exif/上查看自己照片是否拥有额外属性

解决方案

借助exif.js来给他设定样式旋转回去-只针对于h5的情况来处理,app需要参考h5来旋转都是一样的

首先使用npm安装

npm install exif-js --save

建议单独写个js来引用,这里我没用canvas来渲染解决,直接拿到照片当前状态信息返回,利用css3的旋转transform:rotate()来解决

imageUtils.js 你自己的js引用文件这里我们return出去当前照片的状态

/***  imageUtil.js*解决图片旋转的问题*使用同步方式来解决* **/import EXIF from "exif-js"async function compressImage(path) {console.log(path) // 上传图片返回的地址let imageInfo = await getImageInfo(path)let systemInfo = await getSystemInfo()console.log(imageInfo)return new Promise(function (resolve, reject) {// #ifdef APP-PLUS || APP-NVUEappCompressImage(path, imageInfo).then((res) => {resolve(res)}).catch((e) => {reject(e)})// #endif// #ifdef H5let orientation = 1let img = document.createElement("img")img.src = pathconsole.log(img)img.onload = function () {EXIF.getData(img, function () {orientation = EXIF.getTag(this, "Orientation")console.log(orientation) // 关键!将当前照片状态resolve出去resolve(orientation)})}img.onerror = function () {reject(path)}// #endif})
}

在你的上传文件组件使用

import compressImage from "@/api/imgageUtils.js"// 写一个方法来根据你上传图片的返回来分别调用,有几张照片就调用几次,我是循环上传图片所以这里不是循环
async compressImages(path) {// res就是你照片的状态,数字代表你所需要旋转的角度,newpathlist是我存放每张照片所需旋转角度的数组const res = await compressImage(path)if (res === 1) {this.newpathlist.push("rotate(0deg)")} else if (res === 3) {this.newpathlist.push("rotate(180deg)")} else if (res === 6) {this.newpathlist.push("rotate(90deg)")} else if (res === 8) {this.newpathlist.push("rotate(270deg)")}},

调用你的compressImages方法,在上传照片的回调当中

uni.uploadFile({url: apiUrl,file: PATH,name: "file",header: {userName: "123",},success: (uploadFileRes) => {console.log("上传成功返回", uploadFileRes)// debuggerif (JSON.parse(uploadFileRes.data).success) {let path = JSON.parse(uploadFileRes.data).result// pathlist存放当前上传了多少照片this.pathlist.push(path.url)// 调用方法计算照片需要调整的角度this.compressImages(path.url)// 将上传的照片emit到父组件,提交表单使用this.$emit("imgUploads", path.url)}},})

在你的照片回显列表来一一取出照片地址跟所需旋转角度做展示

<viewclass="bg-img"v-for="(item, index) in pathlist":key="index"@tap="ViewImage":data-url="pathlist[index]"><image:style="{transform: newpathlist[index], // 取出旋转角度来给每张照片设置旋转度数}":src="imgList[index]" //设置照片url显示照片></image>// 这里触发照片的删除事件<viewclass="cu-tag bg-red"@tap.stop="DelImg":data-index="index"v-if="isDisable === 'N'"><text class="cuIcon-close"></text></view></view>

删除某张照片,会自动一一对应

DelImg(e) {uni.showModal({title: "提示",content: "确认要删除吗",cancelText: "取消",confirmText: "确认",success: (res) => {if (res.confirm) {// 删除本身存储,旋转角度对应的index,传递给父级删除事件删除对应照片this.pathlist.splice(e.currentTarget.dataset.index, 1)this.newpathlist.splice(e.currentTarget.dataset.index, 1)this.$emit("delete", e.currentTarget.dataset.index)}},})},

总结：

移动端还是有部分坑的,经过研究发现,ios会自动帮你转回照片,所以ios只有6/8两种照片状态,安卓不会,所以在写移动端上传照片之类的要多测,原图跟缩略图也有很大的区别

uniapp安卓上传图片有时候会自动旋转问题解决相关推荐

解决上传图片自动旋转的问题以及对图片进行压缩上传
1. 关于图片自动旋转原因在使用PS或者其他软件旋转图片时,图片旋转了,但Orientation不会改变,由于我们使用的图片预览器能够预处理图片,使其看起来与旋转后一致,但上传图片时,浏览器并不会预 ...
【转】Unity3D研究院之设置自动旋转屏幕默认旋转方向
http://www.xuanyusong.com/archives/2871 如下图所示,在处理屏幕默认旋转方向的时候可以在这里进行选择,上下左右一共是4个方向. 策划的需求是游戏采用横屏,但是要求 ...
IOS6屏幕旋转详解（自动旋转、手动旋转、兼容IOS6之前系统）
转自 http://blog.csdn.net/zzfsuiye/article/details/8251060 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInte ...
php orientation生成图片,图片自动旋转的前端实现方案
随着智能手机的普及,大家已经习惯随手拍点照片传网上了.有时候传上去的照片方向会不对,甚至还有脑袋朝下的情况.为此,各大微博不约而同的给照片增加左右旋转的功能.这样能解决问题,但我们是否能更进一步,自动 ...
计算机毕业设计Python+uniapp+安卓运动健康app（WEB+APP+LW）
计算机毕业设计Python+uniapp+安卓运动健康app(WEB+APP+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ py ...
android 三星调用拍照功能吗,Android 开发手机（三星）拍照应用照片旋转问题解决办法...
Android 开发手机(三星)拍照应用照片旋转问题解决办法最近解决了一个令我头疼好久的问题,就是三星手机拍照图片旋转的问题,项目中有上传图片的功能,那么涉及到拍照,从相册中选择图片,别的手机都ok ...
linux屏幕旋转后触控不准,手机重力感应失效解决方法不能自动旋转屏幕怎么设置...
如今手机已经成为人们生活中必不可少的一个工具了,在使用过程也常常会遇到各种各样的问题,比如当手机重力感应失效的时候应该怎么解决呢,手机不能自动旋转屏幕要怎么设置,针对这个问题下面就为大家带来最新解决方 ...
uni-app 安卓打包流程；未获取AppKey或配置错误
打包后安装应用提示: 未获取AppKey或配置错误:移步最下边第7节 uni-app 安卓打包流程(预备环节): 1. 安装 SDK 和 android studio 2. 申请证书获取Appkey ...
移动端h5页面拍照上传图片的时候图片旋转问题
0. 问题描述在项目中有个图片上传的组件(vue项目) <inputref="input"type="file"multiple="false ...
谈无人车安卓为时尚早，投自动驾驶有三个标准
独家 | 李开复:谈无人车安卓为时尚早,投自动驾驶有三个标准量子位 2017-07-18 20:08 阅读:5 唐旭发自凹非寺量子位报道 | 公众号 QbitAI 今年一月,创新工场人工智能工 ...

uniapp安卓上传图片有时候会自动旋转问题解决

项目场景：

注意事项,此项尤为重要!!!

解决方案

总结：

uniapp安卓上传图片有时候会自动旋转问题解决相关推荐

最新文章

热门文章