短视频带货源码，图片上传前的缩放和压缩操作

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

以上就是短视频带货源码，图片上传前的缩放和压缩操作，更多内容欢迎关注之后的文章