微信小程序圖片壓縮功能的實(shí)現(xiàn)方法

微信小程序圖片壓縮功能的實(shí)現(xiàn)方法 :1、在 wx.chooseImage 接口選擇相機(jī)圖片。2、在 wx.getImageInfo 接口獲取圖片信息。3、計(jì)算壓縮比例和最終圖片的長(zhǎng)寬。4、創(chuàng)建 canvas 繪制最終圖片。5、在 wx.canvasToTempFilePath 接口將畫(huà)布內(nèi)容導(dǎo)出為圖片并獲取圖片路徑。

具體操作步驟：

1、通過(guò) wx.chooseImage 接口選擇相機(jī)圖片。

2、通過(guò) wx.getImageInfo 接口獲取圖片信息（長(zhǎng)寬，類型）。

3、 計(jì)算壓縮比例和最終圖片的長(zhǎng)寬。

4、創(chuàng)建 canvas 繪圖上下文，繪制最終圖片。

5. 通過(guò) wx.canvasToTempFilePath 接口將畫(huà)布內(nèi)容導(dǎo)出為圖片并獲取圖片路徑。

代碼實(shí)現(xiàn)如下所示：

wxml 文件

<canvas canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>

js 文件

data:{ cWidth: 0; cHeight : 0;}

data:{ cWidth: 0; cHeight : 0;}
</pre>
<pre>
wx.chooseImage({
    count: 1, // 默認(rèn)9
    sizeType: ['compressed'], // 指定只能為壓縮圖，首先進(jìn)行一次默認(rèn)壓縮
    sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
    success: function (photo) {
        //-----返回選定照片的本地文件路徑列表，獲取照片信息-----------
        wx.getImageInfo({
            src: photo.tempFilePaths[0],  
            success: function(res){
            //---------利用canvas壓縮圖片--------------
            var ratio = 2;
            var canvasWidth = res.width //圖片原始長(zhǎng)寬
            var canvasHeight = res.height
            while (canvasWidth > 400 || canvasHeight > 400){// 保證寬高在400以內(nèi)
                canvasWidth = Math.trunc(res.width / ratio)
                canvasHeight = Math.trunc(res.height / ratio)
                ratio++;
            }
            that.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: function (res) {
                         console.log(res.tempFilePath)//最終圖片路徑
                     
                     },
                     fail: function (res) {
                         console.log(res.errMsg)
                    }
                })
            },100))    //留一定的時(shí)間繪制canvas
            fail: function(res){
                console.log(res.errMsg)
            },
         })
    }
})