記微信小程序 利用canvas壓縮圖片 並進行base64

最近作一個小程序 上傳圖片時進行base64 老是報上傳圖片失敗 究其緣由是圖片過大 須要進行壓縮

廢話很少說 上代碼

選擇圖片後利用canvas從新繪製圖片大小

利用絕對定位 隱藏canvas

<image class="uploader_input_icon" src="/images/wy/uploader9@3x.png" />
 <canvas canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>複製代碼

由於這裏有多處須要上傳代碼並壓縮，因此抽取出來做爲公共方法

const chooseImage = (_this) => {
    wx.chooseImage({
        count: 1, // 默認9
        sizeType: ['compressed'], // 指定只能爲壓縮圖，首先進行一次默認壓縮
        sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
        success: photo => {
        //將tempFilePaths[0]加入到images數組 做爲展現
            _this.data.images.push(photo.tempFilePaths[0])

            _this.setData({
                    images: _this.data.images
                })
                //-----返回選定照片的本地文件路徑列表，獲取照片信息-----------
            wx.getImageInfo({
                src: photo.tempFilePaths[0],
                success: res => {
                    //---------利用canvas壓縮圖片--------------
                    var ratio = 2;
                    var canvasWidth = res.width //圖片原始長寬
                    var canvasHeight = res.height
                    while (canvasWidth > 400 || canvasHeight > 400) { // 保證寬高在400之內
                        canvasWidth = Math.trunc(res.width / ratio)
                        canvasHeight = Math.trunc(res.height / ratio)
                        ratio++;
                    }
                    _this.setData({
                        cWidth: canvasWidth,
                        cHeight: canvasHeight
                    })

                    //----------繪製圖形並取出圖片路徑--------------
                    var ctx = wx.createCanvasContext('canvas')
                    ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
                    ctx.draw(false, setTimeout(function() {
                        wx.canvasToTempFilePath({
                            canvasId: 'canvas',
                            destWidth: canvasWidth,
                            destHeight: canvasHeight,
                            success: res => {
                                console.log(res.tempFilePath) //最終圖片路徑
                                let path = res.tempFilePath
                                let arr = path.split('.');
                                let list = {};
                                //獲取圖片類型
                                list.imageType = '.' + arr[arr.length - 1];
                                //對圖片進行base64 獲取base64Code
                                list.base64Code = wx
                                    .getFileSystemManager()
                                    .readFileSync(path, 'base64');
                                console.log(list, _this.data.images)
                                 //將list加入到imageList數組中 做爲後臺接口參數
                                _this.data.imageList.push(list)

                            },
                            fail: res => {
                                console.log(res.errMsg)
                            }
                        })
                    }, 100))
                }, //留必定的時間繪製canvas
                fail: res => {
                    console.log(res.errMsg)
                }
            })
        }
    })
}

module.exports = {
    chooseImage
}複製代碼

使用時只須要引入

let uploader = require('../utils/uploader')


data:{
 images: [],
 imageList: []
}

//方法中使用
uploader.chooseImage(this)複製代碼