uniapp h5上传图片对图片进行压缩旋转处理

偏执的太偏执、 2023-06-15 04:57 66阅读 0赞

之前写过一个关于vue的上传图的旋转处理。可以直接点击查看：使用vue进行移动端上传图

场景：uniapp开发的h5项目，需要内嵌在app中运行，在项目首页有一块是自定义上传日历背景图，并且需要进行裁剪。
最开始直接使用的插件市场的插件，但是由于webview的原因，该项目内嵌app后在ios上出现了无法解决的bug。故弃用了插件，并且由于需求调整目前只进行图片的上传旋转处理。（下面着重旋转的处理）

思路：

1、参考vue的处理方法，需要exif.js 获取到图片meta信息中的旋转角度，故首先需要引入exif.js，（本人直接从bootcdn上搜索下载的exif.min.js ）（使用import引入本地文件的方式尝试了下没有成功，放弃了。由于项目本身需要存在了引入第三方的js方法所以exifjs是通过动态添加js的方式全局引入的）

2、通过uni.chooseImage 获取到图片的临时路径，并且将blob临时路径转化为 file文件用于exif获取图片的旋转值

3、根据获取到旋转值（有：1 3 6 8）,如下：

  1. //如果方向角不为1，都需要进行旋转
  2.                             switch (Orientation) {
  3.                                 case 6: //需要顺时针（向右）90度旋转
  4.                                     console.log('（向右）90度旋转');
  5.                                     break;
  6.                                 case 8: //需要逆时针（向左）90度旋转
  7.                                     console.log('向左）90度旋转');
  8.                                     break;
  10.                                 case 3: //需要180度旋转 转两次
  11.                                     console.log('需要180度旋转');
  12.                                     break;
  13.                                 default:
  14.                                     break;
  15.                             }

4、根据网上搜索的处理图片旋转方法或者从往期vue的上传图博客中提到的，对图片进行旋转处理，最终拿到base64的图片信息然后对图片进行上传。（1.直接上传base64 ；2.将base64转化为blob文件后再传后台）

具体代码如下：

  1. 1、
  2. choiceImg(){
  3. var that = this;
  4.             let maxWidth = 500; //压缩图片最大宽度
  5.             let Orientation = 1;
  6.             uni.chooseImage({
  7.                 count: 1, // 能够选择的图片数量
  8.                 sizeType: ['original', 'compressed'], // original: 原图, compressed: 压缩图, 默认二者都有
  9.                 sourceType: ['album'], // album: 从相册选择   camera: 相机拍照
  10.                 success: res => {
  11.                     let imgArr = res.tempFilePaths; // 所选择图片的临时路径数组
  12.                     //BlobUrl转blob数据
  14.                     uni.showToast({
  15.                         icon: "none",
  16.                         title: "图片处理中..."
  17.                     })
  18.                     //blob数据转file
  19.                     this.objectURLToBlob(imgArr[0], function(blob) {
  20.                         let files = new window.File([blob], 'file.name', { type: 'file.type' });
  21.                         console.log('获取图片文件', files);
  22.                         EXIF.getData(files, async function() {
  23.                             let or = EXIF.getTag(this, 'Orientation'); //这个Orientation 就是我们判断需不需要旋转的值了，有1、3、6、8
  24.                             console.log(or);
  25.                             Orientation = or;
  26.                             var img = null;
  27.                             var canvas = null;
  28.                             await that.comprossImage(imgArr[0], maxWidth, function(e) {
  29.                                 img = e.img;
  30.                                 canvas = e.canvas;
  31.                             });
  32.                             let baseStr = '';
  33.                             //如果方向角不为1，都需要进行旋转
  34.                             switch (Orientation) {
  35.                                 case 6: //需要顺时针（向右）90度旋转
  36.                                     console.log('（向右）90度旋转');
  37.                                     baseStr = that.rotateImg(img, 'right', canvas);
  38.                                     break;
  39.                                 case 8: //需要逆时针（向左）90度旋转
  40.                                     console.log('向左）90度旋转');
  41.                                     baseStr = rotateImg(img, 'left', canvas);
  42.                                     break;
  44.                                 case 3: //需要180度旋转 转两次
  45.                                     console.log('需要180度旋转');
  46.                                     baseStr = that.rotateImg(img, 'right', canvas, 2);
  47.                                     break;
  48.                                 default:
  49.                                     baseStr = that.rotateImg(img, '', canvas);
  50.                                     break;
  51.                             }
  52.                         });
  53.                     });
  54.                 }
  55.             });
  56. }
  58. 2、1中使用到的将blob转化为file方法 和图片的压缩方法
  59. objectURLToBlob(url, callback) {
  60.             var http = new XMLHttpRequest();
  61.             http.open('GET', url, true);
  62.             http.responseType = 'blob';
  63.             http.onload = function(e) {
  64.                 if (this.status == 200 || this.status === 0) {
  65.                     callback(this.response);
  66.                 }
  67.             };
  68.             http.send();
  69.         },
  70.         async comprossImage(imgSrc, maxWidth, func) {
  71.             if (!imgSrc) return 0;
  72.             return new Promise((resolve, reject) => {
  73.                 uni.getImageInfo({
  74.                     src: imgSrc,
  75.                     success(res) {
  76.                         let img = new Image();
  77.                         img.src = res.path;
  78.                         console.log(img);
  80.                         let canvas = document.createElement('canvas');
  82.                         let obj = new Object();
  83.                         obj.img = img;
  84.                         obj.canvas = canvas;
  85.                         resolve(func(obj));
  86.                     }
  87.                 });
  88.             });
  89.         },
  91. 3、图片的旋转处理
  92. rotateImg(img, direction, canvas, times = 1) {
  93.             console.log('开始旋转');
  94.             //最小与最大旋转方向，图片旋转4次后回到原方向
  95.             var min_step = 0;
  96.             var max_step = 3;
  97.             if (img == null) return;
  99.             //img的高度和宽度不能在img元素隐藏后获取，否则会出错
  100.             var height = img.height;
  101.             var width = img.width;
  102.             let maxWidth = 500;
  103.             let canvasWidth = width; //图片原始长宽
  104.             let canvasHeight = height;
  105.             let base = canvasWidth / canvasHeight;
  106.             console.log(maxWidth);
  107.             if (canvasWidth > maxWidth) {
  108.                 canvasWidth = maxWidth;
  109.                 canvasHeight = Math.floor(canvasWidth / base);
  110.             }
  111.             width = canvasWidth;
  112.             height = canvasHeight;
  113.             var step = 0;
  115.             if (step == null) {
  116.                 step = min_step;
  117.             }
  119.             if (direction == 'right') {
  120.                 step += times;
  121.                 //旋转到原位置，即超过最大值
  122.                 step > max_step && (step = min_step);
  123.             } else if (direction == 'left') {
  124.                 step -= times;
  125.                 step < min_step && (step = max_step);
  126.             } else {
  127.                 //不旋转
  128.                 step = 0;
  129.             }
  131.             //旋转角度以弧度值为参数
  132.             var degree = (step * 90 * Math.PI) / 180;
  133.             var ctx = canvas.getContext('2d');
  134.             // console.log(degree)
  135.             // console.log(step)
  136.             switch (step) {
  137.                 case 1:
  138.                     console.log('右旋转 90度');
  139.                     canvas.width = height;
  140.                     canvas.height = width;
  141.                     ctx.rotate(degree);
  142.                     ctx.drawImage(img, 0, -height, width, height);
  143.                     break;
  144.                 case 2:
  145.                     //console.log('旋转 180度')
  146.                     canvas.width = width;
  147.                     canvas.height = height;
  148.                     ctx.rotate(degree);
  149.                     ctx.drawImage(img, -width, -height, width, height);
  150.                     break;
  151.                 case 3:
  152.                     console.log('左旋转 90度');
  153.                     canvas.width = height;
  154.                     canvas.height = width;
  155.                     ctx.rotate(degree);
  156.                     ctx.drawImage(img, -width, 0, width, height);
  157.                     break;
  158.                 default:
  159.                     //不旋转
  160.                     canvas.width = width;
  161.                     canvas.height = height;
  162.                     ctx.drawImage(img, 0, 0, width, height);
  163.                     break;
  164.             }
  166.             let baseStr = canvas.toDataURL('image/jpeg', 1);
  167.             // console.log(baseStr)
  168.             // return baseStr;
  169.             // replace("data:image/jpeg;base64,", "")
  170.             // 将base64转化为blob文件进行图片上传，（考虑到转化后再上传耗费时间暂时没有使用，如果需要base64ToPath 方法可百度或者私信我）
  171.             // base64ToPath(baseStr).then(tempPath => {
  172.             //     this.uploadBgImg(tempPath)
  173.             // });
  174.             // 自定义上传请求
  175.             this.uploadBaseImg(baseStr);
  176.         },

追加：

  1. export function pathToBase64(path) {
  2.     return new Promise(function(resolve, reject) {
  3.         if (typeof window === 'object' && 'document' in window) {
  4.             var canvas = document.createElement('canvas')
  5.             var c2x = canvas.getContext('2d')
  6.             var img = new Image
  7.             img.setAttribute('crossOrigin', 'anonymous');
  8.             // img.crossOrigin = "anonymous"
  9.             img.onload = function() {
  10.                 canvas.width = img.width
  11.                 canvas.height = img.height
  12.                 c2x.drawImage(img, 0, 0)
  13.                 resolve(canvas.toDataURL())
  14.             }
  15.             img.onerror = reject
  16.             img.src = path
  17.             return
  18.         }
  19.         if (typeof plus === 'object') {
  20.             var bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
  21.             bitmap.load(path, function() {
  22.                 try {
  23.                     var base64 = bitmap.toBase64Data()
  24.                 } catch (error) {
  25.                     reject(error)
  26.                 }
  27.                 bitmap.clear()
  28.                 resolve(base64)
  29.             }, function(error) {
  30.                 bitmap.clear()
  31.                 reject(error)
  32.             })
  33.             return
  34.         }
  35.         if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
  36.             wx.getFileSystemManager().readFile({
  37.                 filePath: path,
  38.                 encoding: 'base64',
  39.                 success: function(res) {
  40.                     resolve('data:image/png;base64,' + res.data)
  41.                 },
  42.                 fail: function(error) {
  43.                     reject(error)
  44.                 }
  45.             })
  46.             return
  47.         }
  48.         reject(new Error('not support'))
  49.     })
  50. }
  52. export function base64ToPath(base64) {
  53.     return new Promise(function(resolve, reject) {
  54.         if (typeof window === 'object' && 'document' in window) {
  55.             base64 = base64.split(',')
  56.             var type = base64[0].match(/:(.*?);/)[1]
  57.             var str = atob(base64[1])
  58.             var n = str.length
  59.             var array = new Uint8Array(n)
  60.             while (n--) {
  61.                 array[n] = str.charCodeAt(n)
  62.             }
  63.             return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
  64.         }
  65.         var extName = base64.match(/data\:\S+\/(\S+);/)
  66.         if (extName) {
  67.             extName = extName[1]
  68.         } else {
  69.             reject(new Error('base64 error'))
  70.         }
  71.         var fileName = Date.now() + '.' + extName
  72.         if (typeof plus === 'object') {
  73.             var bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
  74.             bitmap.loadBase64Data(base64, function() {
  75.                 var filePath = '_doc/uniapp_temp/' + fileName
  76.                 bitmap.save(filePath, {}, function() {
  77.                     bitmap.clear()
  78.                     resolve(filePath)
  79.                 }, function(error) {
  80.                     bitmap.clear()
  81.                     reject(error)
  82.                 })
  83.             }, function(error) {
  84.                 bitmap.clear()
  85.                 reject(error)
  86.             })
  87.             return
  88.         }
  89.         if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
  90.             var filePath = wx.env.USER_DATA_PATH + '/' + fileName
  91.             wx.getFileSystemManager().writeFile({
  92.                 filePath: filePath,
  93.                 data: base64.replace(/^data:\S+\/\S+;base64,/, ''),
  94.                 encoding: 'base64',
  95.                 success: function() {
  96.                     resolve(filePath)
  97.                 },
  98.                 fail: function(error) {
  99.                     reject(error)
  100.                 }
  101.             })
  102.             return
  103.         }
  104.         reject(new Error('not support'))
  105.     })
  106. }

发表评论

表情：
评论列表 （有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

    相关 iOS-上传图片压缩处理

    iOS图片压缩，想必这是一个比较大切值得深入的一个研究。所以太深入的这里我也不会去讲，之所以写这篇，是因为我们在开发中，因为iphone拍照后，直接上传的图片大多数像素比较高，

    一时失言乱红尘一时失言乱红尘/ 0 赞/ 198 阅读

    相关 h5多图片上传

    做了一个h5多图片上传 只要了解了 基本原理，那就很好理解了，可以看看注释或者在网上找找原理 <!doctype html> <html>

    迷南。迷南。/ 0 赞/ 348 阅读