小程序相關-分享頁面圖片處理

 小程序開發的時候， 經常能碰上一個問題， 就是頁面分享。

分享頁面來說會自定義一個標題， 以及一張封面圖，

小程序的分享圖是5:4的比例， 一般圖片都需要裁剪纔可以，

這裏有兩種方案：

一個是後端處理，即後端在輸出圖片數據的同時，裁剪出一個適合分享的圖片

另一個是小程序前端自行處理。

我們這裏說的是前端對圖片的處理， 使各種比例的圖片都能以居中的形式展示在分享鏈接中

1. 下面上個代碼：

 

//圖片裁剪方法
let adjustShareImage = function(canvasId, url, resolve = null, reject = null) {
    wx.getImageInfo({
        src: url,  // 這裏填寫網絡圖片路徑
        success: (res) => {
            let ctx = wx.createCanvasContext(canvasId)
            //填充白色背景
            ctx.fillStyle="#ffffff";
            ctx.fillRect(0,0, 384, 384);

            let canvasW = 384, canvasH = 307.2
            let destWidth, destHeight
            let resWidth = res.width, resHeight = res.height
            console.log("width: " + resWidth + " height: " + resHeight)

            //寬高比（5:4）是畫布尺寸
            const whRate = resWidth / resHeight
            //縮放比例
            let scaleRate = 0
            if(whRate > 1.25) {
                //寬圖
                scaleRate = canvasW / resWidth
            }else{
                //窄圖
                scaleRate = canvasH / resHeight
            }
            destWidth = resWidth * scaleRate
            destHeight = resHeight * scaleRate

            ctx.drawImage(res.path,
                0, 0,
                resWidth, resHeight,
                (canvasW - destWidth)/2, (canvasH - destHeight)/2,
                destWidth, destHeight)
            ctx.draw(false, () => {
                wx.canvasToTempFilePath({
                    width: canvasW,
                    height: canvasH,
                    destWidth: canvasW,
                    destHeight: canvasH,
                    canvasId: canvasId,
                    fileType: 'jpg',
                    success: (res) => {
                        //圖片處理成功回調
                        resolve(res)
                    }
                })
            })
        }
    });
}

 以上就是整個圖片剪裁的代碼

2. 效果展示

備註：

需要分享鏈接的頁面需要增加一個canvas元素

<canvas style="position: absolute; top: -1000px; left: -1000px; width: 384px; height: 384px; background: #fff;" canvas-id="canvas"></canvas>