问题简单描述

以往没有uniapp上传图片的经验，这两天刚接手这个功能，遇到了一系列糟心的事情

1.第一版我使用的插件市场的图片压缩插件，出现的问题：低版本安卓拍照出现闪退白屏等问题

2.第二版我换了个图片压缩插件，出现的问题：
a:上传成功后，提交数据，结果在iOS上不能调用window.webkit关闭当前网页，于是只好ISO做了拦截处理，这不是最严重的，最严重的是
b:图片上传成功后逆时针旋转了90度

解决办法

我也百度参考以往大佬的经验，最后终于完美解决了：
1.导入exif插件
import EXIF from ‘@/utils/exif.js’

2.uni.chooseImage选择上传图片，获取到res后的blod

data() {return {maxSize:10,resImg:''}},
methods: {
insertImage() {uni.chooseImage({count: 1,size:10*1000000,sizeType: ['compressed'],success: (res) => {//这是需求要求的上传限制，可以不要if (parseInt(tempFiles.size) > this.maxSize * 1024 * 1024) {uni.showToast({title: '图片大于'+this.maxSize+'MB！',icon: 'none'})} else {this.resImg = res.tempFilePaths[0]//这就是要的blodthis.detail(this.resImg)} }})},
}

3.调用this.detail方法做图片处理，这里还用到了this.comprossImage图片压缩和this.getImageTag图片方法，以及最后对图片修正处理方法this.rotateImg，直接粘贴就行

     //url 就是上面获取到的blodasync detail(url){let maxWidth = 500;  let Orientation = 1;  //获取图片META信息  await this.getImageTag(url, 'Orientation', function(e) {  if(e != undefined) Orientation = e;  })  var img = null;  var canvas = null;  await this.comprossImage(url, maxWidth, function(e) {  img = e.img;  canvas = e.canvas;  })  console.log(Orientation,"Orientation")  let baseStr = '';  //如果方向角不为1，都需要进行旋转  switch(Orientation){  case 6://需要顺时针（向右）90度旋转  baseStr = this.rotateImg(img,'right',canvas);  break;  case 8://需要逆时针（向左）90度旋转   baseStr = this.rotateImg(img,'left',canvas);  break;  case 3://需要180度旋转 转两次  baseStr = this.rotateImg(img,'right',canvas, 2);  break;  default:  baseStr = this.rotateImg(img,'',canvas);  break;  }  console.log(baseStr,"baseStr")this.uploadImg(baseStr)//图片上传到服务器的方法},//-------------------------------直接粘贴的三个方法async comprossImage(imgSrc, maxWidth, func){  if(!imgSrc) return 0;  return new Promise((resolve, reject) => {  uni.getImageInfo({  src: imgSrc,  success(res) {  let img = new Image();  img.src = res.path;  console.log(img)  let canvas = document.createElement('canvas');  let obj = new Object();  obj.img = img;  obj.canvas = canvas;  resolve(func(obj));  }  });  })  },/**  * @desc 获取图片信息，使用exif.js库，具体用法请在github中搜索  * @param {Object} file 上传的图片文件  * @param {String} tag 需要获取的信息 例如：'Orientation'旋转信息  * @return {Promise<Any>} 读取是个异步操作，返回指定的图片信息  */  getImageTag(file, tag, suc){  if (!file) return 0;  return new Promise((resolve, reject) => {  /* eslint-disable func-names */  // 箭头函数会修改this，所以这里不能用箭头函数  let imgObj = new Image()  imgObj.src = file  console.log(imgObj)  uni.getImageInfo({  src: file,  success(res) {  EXIF.getData(imgObj, function () {  EXIF.getAllTags(this);    let or = EXIF.getTag(this,'Orientation');//这个Orientation 就是我们判断需不需要旋转的值了，有1、3、6、8  resolve(suc(or))  });  }  })  });  },rotateImg(img, direction, canvas, times = 1){   console.log('开始旋转')  //最小与最大旋转方向，图片旋转4次后回到原方向    var min_step = 0;    var max_step = 3;    if (img == null)return;    //img的高度和宽度不能在img元素隐藏后获取，否则会出错    var height = img.height;    var width = img.width;    let maxWidth = 500;  let canvasWidth = width; //图片原始长宽  let canvasHeight = height;  let base = canvasWidth/canvasHeight;  console.log(maxWidth);  if(canvasWidth > maxWidth){  canvasWidth = maxWidth;  canvasHeight = Math.floor(canvasWidth/base);  }  width = canvasWidth;  height = canvasHeight;  var step = 0;    if (step == null) {    step = min_step;    }    if (direction == 'right') {    step += times;    //旋转到原位置，即超过最大值    step > max_step && (step = min_step);    } else if(direction == 'left'){    step -= times;    step < min_step && (step = max_step);    } else {    //不旋转  step = 0;  }  //旋转角度以弧度值为参数    var degree = step * 90 * Math.PI / 180;    var ctx = canvas.getContext('2d');    console.log(degree)  console.log(step)  switch (step) {      case 1:    console.log('右旋转 90度')  canvas.width = height;    canvas.height = width;    ctx.rotate(degree);    ctx.drawImage(img, 0, -height, width, height);    break;    case 2:    //console.log('旋转 180度')  canvas.width = width;    canvas.height = height;    ctx.rotate(degree);    ctx.drawImage(img, -width, -height, width, height);    break;    case 3:    console.log('左旋转 90度')  canvas.width = height;    canvas.height = width;    ctx.rotate(degree);    ctx.drawImage(img, -width, 0, width, height);  break;    default:  //不旋转  canvas.width = width;  canvas.height = height;  ctx.drawImage(img, 0, 0, width, height);  break;  }  let baseStr = canvas.toDataURL("image/jpeg", 1);  return baseStr;  },//-----------------------------------------------结束uploadImg(tempFilePaths) {console.log(tempFilePaths,"触发上传接口")uni.uploadFile({url: '服务器地址',filePath: tempFilePaths,fileType:"image",header:{"Authorization":'Bearer ' + localStorage.getItem('token')},name: 'file',success: (res) => {uni.hideLoading()let resObj = JSON.parse(res.data)if (resObj.meta.code === 200) {let data = resObj.data.url;console.log(data)} }}

     好了，有什么问题欢迎大家一起讨论！最后非常感谢原文(https://ask.dcloud.net.cn/article/36521)提供的经验，谢谢谢谢

解决uniapp在h5图片上传后旋转90度问题(editor同样适用)相关推荐

为什么手机上传图片这么慢前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
uni-app APP,H5图片上传添加文字水印，图片只显示左上角bug(H5,安卓App可用，其他暂未测试)
项目场景: 提示:这里简述项目相关背景: uni-app上传图片添加文字水印功能时图片只显示左上角,或者图片重叠图片不规则一系列bug,特此记录问题描述提示:这里描述项目中遇到的问题: 上传图片 ...
微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)
微信开发h5图片上传开发环境 vue.js,原生h5 input file, 微信公众号网页依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理: ...
Android WebView 支持H5图片上传input type=file
2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...
Python改变图片EXIF信息（修复图片上传后方向改变的BUG）
文章目录简介安装读取 EXIF 保存 EXIF 插入 EXIF 删除 EXIF 复制 EXIF 将 PIL 读取的信息存入 EXIF 标签内容根据旋转信息旋转图片生成一套方向图片 ExifT ...
移动端图片上传后进行压缩功能
移动端图片上传后进行压缩功能在进行讲解上传图片压缩之前,我们先来了解下HTML5中的文件上传的基本知识点. 一: FileList对象与file对象. FileList对象表示用户选择的文件列表.在 ...
java实现图片上传后裁剪，把白色背景变成透明图（电子印章）
应用场景:企业在白纸上盖上印章,然后软件实现透明的电子印章,在后续业务流程中使用! A4纸-----------------------------------------处理后----------- ...
java 盖章透明_java实现图片上传后裁剪，把白色背景变成透明图（电子印章）
应用场景:企业在白纸上盖上印章,然后软件实现透明的电子印章,在后续业务流程中使用! A4纸-----------------------------------------处理后----------- ...
选择相册图片上传后，客户端显示图片却是被旋转过角度
我想某位大哥也遇到过这个问题,就是手机相册选择图片时,显示是正的(未被旋转角度的),但是上传该图片后,客户端却显示被旋转了xx度的.那这肯定是客户不想出现的问题,同样也是我们开发者不想出现bug.我想 ...

解决uniapp在h5图片上传后旋转90度问题(editor同样适用)

问题简单描述

解决办法

解决uniapp在h5图片上传后旋转90度问题(editor同样适用)相关推荐

最新文章

热门文章