微信小程序文件壓縮上傳

試用場景：上傳圖片過大，需進行壓縮處理。

涉及微信API

API	說明	文檔
chooseImage	選擇圖片	https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
createCanvasContext	創建canvas畫布	https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html
getImageInfo	獲取圖片信息	https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.getImageInfo.html
CanvasContext.drawImage()	繪制圖像到畫布	https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
CanvasContext.draw()	繪制是否跟着上次繪制，即是否清空畫板	https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.draw.html
canvasToTempFilePath	把當前畫布導出指定大小的圖片，即壓縮圖片	https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

wxml

    <!--不顯示畫板且正常獲取生成的壓縮圖片-->
    <canvas
        style="width: {{canWidth}}px;height: {{canHeight}}px;visibility:hidden;z-index: -1px" 
        canvas-id="attendCanvasId"
        class="pa tp-0 lf-0"/>
    <view
        bindtap='create'
        style="background-color: {{themeColor}}"
        class="dib pl-30 pr-30 ht-80 lh-80 bdr-100 white wi-100 tc fs-32">
        上傳圖片
    </view>

js

    data: {
        // 接收選中的圖片列表
        files: [],
        // 接收壓縮后的圖片
        compressFiles: [],
        // 預設畫布寬高
        canvasWidth: 0,
        canvasHeight: 0
    },
    // 選擇圖片
    chooseImage: function () {
        var that = this;
        wx.chooseImage({
            count: 6, // 設置允許選擇的圖片個數
            sizeType: ['compressed'], // 壓縮圖
            sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
            success: function (res) {
                // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
                that.setData({
                    files: that.data.files.concat(res.tempFilePaths)
                })
            }
        })
    },
    // 繪圖
    drawCanvas: function () {
        this.setData({
            compressFiles: []
        }, () => {
                const ctx = wx.createCanvasContext('attendCanvasId')
                let that = this
                for (let i in this.data.files) {
                    let item = this.data.files[i]
                    wx.getImageInfo({
                        src: item,
                        success: function (res) {
                            if (res.width > 275 || res.height > 172) { // 判斷圖片超過一定像素侯進行壓縮
                                // 獲取原圖比例
                                let scale = res.width / res.height
                                that.setData({
                                    canvasWidth: 275,
                                    canvasHeight: 275 / scale
                                })
                                // 畫出壓縮圖片
                                ctx.drawImage(that.data.files, 0, 0, that.data.canvasWidth, that.data.canvasHeight)
                                ctx.draw()
                                // 等待壓縮圖片生成
                                that.prodImageOpt()
                            }
                        }
                    })
                }
        })
    },
    // 壓縮圖片
    prodImageOpt: function () {
        let that = this
        wx.canvasToTempFilePath({
            canvasId: 'attendCanvasId', // 畫布id
            fileType: 'jpg', // 壓縮圖片的格式
            quality: 1, // 壓縮圖片的質量，進‘jpg’格式可用
            success: function (res) {
                let arr = that.data.compressFiles
                arr.push(res.tempFilePath)
                that.setData({
                    compressFiles: arr
                })
                // 查看文件壓縮后的信息
                // wx.getImageInfo({
                //     src: res.tempFilePath,
                //     success: function (res) {
                //         console.log(res)
                //     }
                // })
            }
        })
    },
    // 上傳圖片
    create: function () {
        let arr = this.drawCanvas() // 提交表單時繪制畫布並進行壓縮
        setTimeout(() => {
            // 獲取壓縮后的圖片路徑
            console.log(this.data.compressFiles)
        }, 300)
        // 請求函數
        ...
        ...
        ...
    }