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

布满荆棘的人生 2022-12-15 11:15 395阅读 0赞

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