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

Posted 2021-01-18 奔跑吧前端（李钊）

//选择图片
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
            }
        }

微信小程序压缩图片需要用到

const upng = require(‘../../static/js/upng.js‘);和pake.min.js去下载两个文件放一起

地址https://github.com/zh8637688/wx-cardscanner/tree/master/cardscanner/upng-js