微信小程序,图片上传前的压缩容量和尺寸

思路：选择图片后根据图片信息来更改canvas的长宽，将图片绘制上去后导出路径，调用wx的api进行压缩。

    <!-- 仅供缩放图片使用，整个流程跑成功后可通过样式让其不可见 -->
    <canvas canvas-id='attendCanvasId' class='myCanvas' style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;"></canvas>
     
    .myCanvas{
        background:#000;  
        margin:30rpx auto; 
        position:absolute; 
        right:1440px; 
        top: -1440px;
    }

    //页面所需定义的data
    data = {
        canvasWidth: 0, // canvas长度
        canvasHeight: 0, //canvas高度
        originalFileInfoArr:[],//图片缩放压缩后保存的临时数组
    }

    //选择照片
    select_img(){
        var that= this
        wx.chooseImage({
            count: 1,
            success(res) {
                if(res.tempFiles.length>0){
                    that.getCanvasImg(res.tempFiles) // 通过canvas进行缩放
                }
                wx.showLoading({ title: 'Loading...'});
            }
        })  
    }
     
    //缩放操作（将图片的最长边缩至1440，短边等比例缩放）
    getCanvasImg(tempFiles){
        var that = this
        // 获取图片信息来设置canvas的长高
        wx.getImageInfo({
            src: tempFiles[0].path,
            success(imgDetail){
                var maxWidth = 1440  // 最大长度
                var maxHeight = 1440 // 最大高度
                var bili = imgDetail.width/imgDetail.height // 获取图片长高比例
                if(imgDetail.width>maxWidth || imgDetail.height>maxHeight){
                    if(imgDetail.width >= imgDetail.height){ // 长图或正方形
                        that.canvasWidth = maxWidth
                        that.canvasHeight = Number(maxWidth/bili).toFixed(0)
                    }else{ // 高图
                        that.canvasHeight = maxHeight
                        that.canvasWidth = Number(maxHeight*bili).toFixed(0)
                    }
                    const ctx = wx.createCanvasContext('attendCanvasId');
                    ctx.drawImage(imgDetail.path, 0, 0, Number(that.canvasWidth), Number(that.canvasHeight));
                    ctx.draw(false, function () {
                        setTimeout(() => {
                            wx.canvasToTempFilePath({
                                canvasId: 'attendCanvasId',
                                success(res) {
                                    that.compressImg(res.tempFilePath) // 缩放成功后压缩
                                }, 
                                fail(res) {
                                    wx.showToast({ title: 'canvas缩放失败', icon: 'none'});                             
                                }
                            });
                        }, 200);
                    });
                }else{ // 图片最长边未超过1440，无需进行缩放，直接掉起压缩方法
                    that.canvasWidth = imgDetail.width
                    that.canvasHeight = imgDetail.height
                    that.compressImg(imgDetail.path)
                }
            }
        })       
    }
     
    //压缩操作
    compressImg(path){
        var that = this
        wx.compressImage({
            src: path,
            quality: 75, // 压缩质量
            success(e){
                let i = e.tempFilePath.lastIndexOf ('.',(e.tempFilePath.lastIndexOf (".")-1));
                let name = e.tempFilePath.substring(i+1, e.tempFilePath.length) //截取到微信临时路径的最后一段名称
                //保存到临时数组，可以遍历通过image标签在前端显示
                that.originalFileInfoArr.push({name:name, size:500, filePath:e.tempFilePath})
                wx.hideLoading();
            },
            fail(){
                wx.showToast({ title: '压缩失败', icon: 'none'});
            }
        })
    }

此处须注意的是压缩方法在开发者工具上调用的话都会执行到fail回调，需使用真机进行测试。

仅此记录自己使用的方法，如有不足请指出。
————————————————

原文链接：https://blog.csdn.net/qq_37451395/article/details/102636662