uni-app图片压缩转base64位利用递归来实现多张图片压缩 _uni-app

莫问天涯路几重，轻衫侧帽且从容。这篇文章主要讲述uni-app图片压缩转base64位利用递归来实现多张图片压缩相关的知识，希望能为你提供帮助。

//选择图片 chooseImage(){ let that =this uni.chooseImage({ sizeType: [‘original‘,‘compressed‘], //可以指定是原图还是压缩图，默认二者都有 count: 9,//默认9 success: (rem) => { console.log(rem) that.tempFilePaths = rem.tempFilePaths; //#ifdef MP-WEIXIN //图片压缩并转base64 that.weixin_img(0,rem) //#endif//#ifdef APP-PLUS //图片压缩 that.app_img(0,rem) //#endif} }) },

//app压缩图片用for循环来处理图片压缩的问题，原因是 plus.zip.compressImage 方法是异步执行的，for循环很快，同时手机可执行的压缩方法有限制：应该是3个吧。超出直接就不执行了。所以原理就是在图片压缩成功后继续回调压缩函数。以到达循环压缩图片的功能。 app_img(num,rem){ let that=this let index = rem.tempFiles[num].path.lastIndexOf("."); //获取图片地址最后一个点的位置 let img_type= rem.tempFiles[num].path.substring(index+1,rem.tempFiles[num].path.length); //截取图片类型如png jpg let img_yuanshi = rem.tempFiles[num].path.substring(0,index); //截取图片原始路径 let d2 = new Date().getTime(); //时间戳 //压缩图片 plus.zip.compressImage( { src:rem.tempFiles[num].path,//你要压缩的图片地址 dst:img_yuanshi+d2+‘.‘+img_type,//压缩之后的图片地址(注意压缩之后的路径最好和原生路径的位置一样，不然真机上报code-5) quality:10//[10-100] }, function(e) { console.log("Compress success!",e.target); //压缩之后路径转base64位的 //通过URL参数获取目录对象或文件对象 plus.io.resolveLocalFileSystemURL(e.target, function( entry ) { // 可通过entry对象操作test.html文件 entry.file( function(file){//获取文件数据对象 var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象，用于获取文件的内容 //alert("getFile:" + JSON.stringify(file)); fileReader.readAsDataURL( file ); //以URL编码格式读取文件数据内容 fileReader.onloadend = function(evt) {//读取文件成功完成的回调函数 console.log(evt.target.result.split(",")[1])//拿到‘data:image/jpeg; base64,‘后面的rem.tempFiles[num].Base64_Path=evt.target.result.split(",")[1] } }) }) that.materialList = that.materialList.concat(rem.tempFiles[num]); //利用递归循环来实现多张图片压缩 if(num==rem.tempFiles.length-1){ return }else{ that.app_img(num+1,rem) } console.log(‘end‘,that.materialList) },function(error) { console.log("Compress error!"); console.log(JSON.stringify(error)); } ); },

//微信压缩 weixin_img(num,rem){ let that=this wx.getImageInfo({//获取这个图片图片压缩 src: rem.tempFiles[num].path,//需要获取的图片图片选择不用我说了吧 success: function (res) { var ctx = wx.createCanvasContext(‘attendCanvasId‘); //使用一个canvas var canvasWidth = res.width//原图宽度 var canvasHeight = res.height; //原图高度 var ratio = 2; // 保证宽高均在200以内 while (canvasWidth > 200 || canvasHeight > 200){ //比例取整 canvasWidth = Math.trunc(res.width / ratio) canvasHeight = Math.trunc(res.height / ratio) ratio++; } //绘制新图 ctx.drawImage(rem.tempFiles[num].path, 0, 0, canvasWidth, canvasHeight) ctx.draw(false, () => { //获取图像数据， API 1.9.0 wx.canvasGetImageData({ canvasId: ‘attendCanvasId‘, x: 0, y: 0, width: canvasWidth, height: canvasHeight, success : (res) => { let platform = wx.getSystemInfoSync().platform if (platform == ‘ios‘) { // 兼容处理：ios获取的图片上下颠倒 res = that.reverseImgData(res) } // 3. png编码 let pngData = upng.encode([res.data.buffer],canvasWidth, canvasHeight) // 4. base64编码 let base64 = wx.arrayBufferToBase64(pngData) // console.log(‘1111‘,‘data:image/jpeg; base64,‘+base64) rem.tempFiles[num].Base64_Path=base64 that.materialList = that.materialList.concat(rem.tempFiles[num]); //利用递归循环来实现多张图片压缩 if(num==rem.tempFiles.length-1){ return }else{ that.weixin_img(num+1,rem) } console.log(‘end‘,that.materialList) } }) }) }, })}, // 兼容处理：ios获取的图片上下颠倒 reverseImgData(res) { var w = res.width var h = res.height let con = 0 for (var i = 0; i < h / 2; i++) { for (var j = 0; j < w * 4; j++) { con = res.data[i * w * 4 + j] res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j] res.data[(h - i - 1) * w * 4 + j] = con } } return res } }

【uni-app图片压缩转base64位利用递归来实现多张图片压缩】微信小程序压缩图片需要用到
const upng = require(‘../../static/js/upng.js‘); 和pake.min.js去下载两个文件放一起
地址https://github.com/zh8637688/wx-cardscanner/tree/master/cardscanner/upng-js