小程序相关-分享页面图片处理

 小程序开发的时候， 经常能碰上一个问题， 就是页面分享。

分享页面来说会自定义一个标题， 以及一张封面图，

小程序的分享图是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>