微信小程序分享封面图比例问题

背景:

微信小程序现在页面分享微信官方api要求分享封面图的比例是宽高比5:4,但是由于安卓和ios的图片缩放策略不同,导致目前的问题ios图片显示正常,安卓机分享页面封面图显示不全,目前官方尚未解决此问题,只能我们自己先处理掉

1,在需要自定义分享的页面 设置canvas 组件

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

2,详解思路

uni.getImageInfo // 获取图片信息
获取网络图片信息需先配置download域名白名单才能生效。
https://mp.weixin.qq.com/ 登录小程序 开发管理 - 开发设置 - 服务器域名 配置download域名白名单

uni.getImageInfo({
    src: '图片',
    success: (image)=> {
            //返回图片信息 宽高
            console.log(image.width); 
            console.log(image.height);
    }
});

获取到图片信息后
uni.createCanvasContext("canvas") //创建 canvas 绘图上下文
定义canvas 信息

 let ctx = uni.createCanvasContext("canvas")
  let canvasW = 0
  let canvasH = res.height
  // 把比例设置为 宽比高 5:4
  canvasW = (res.height * 5) / 4
  // 为画框设置背景色，注意要放在画图前，图会覆盖在背景色上
  ctx.fillStyle = "#fff"
  //填充矩形 设置矩形的宽高
  ctx.fillRect(0, 0, canvasW, canvasH) //左上角的x坐标,左上角的y坐标,宽度,高度
  //绘制图像到画布上
  ctx.drawImage(
    res.path, 
    (res.width - canvasW) / 2, 0, canvasW, canvasH,0, 0, canvasW, canvasH
  ) 
  // 图片资源，图像左上角在canvas画布上X轴的位置，Y轴的位置，绘制图像的宽度，高度，源图像的矩形选择框的左上角 X 坐标， Y 坐标，源图像的矩形选择框的宽度，高度

ctx.draw(false, () => {
    //canvas在绘图上下文中的描述（路径、变形、样式）实例 画到 canvas 中。
    
})

uni.canvasToTempFilePath
把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。

总函数

/**
     * 分享封面图片比例
     * @param imgUrl
     */
    getShareImg(imgUrl) {
        return new Promise((resolve) => {
            Taro.getImageInfo({
                src: imgUrl, // 原图路径
                success: (res) => {
                    let ctx = Taro.createCanvasContext("canvas");
                    let canvasW = 0;
                    let canvasH = res.height;
                    // 把比例设置为 宽比高 5:4
                    canvasW = (res.height * 5) / 4;
                    // 为画框设置背景色，注意要放在画图前，图会覆盖在背景色上
                    ctx.fillStyle = "#fff";
                    ctx.fillRect(0, 0, canvasW, canvasH);
                    ctx.drawImage(res.path, (res.width - canvasW) / 2, 0, canvasW, canvasH, 0, 0, canvasW, canvasH);
                    ctx.draw(false, () => {
                        Taro.canvasToTempFilePath({
                            width: canvasW,
                            height: canvasH,
                            destWidth: 750, // 标准的iphone6尺寸的两倍，生成高清图
                            destHeight: 600,
                            canvasId: "canvas",
                            fileType: "jpg", // 注意jpg默认背景为透明
                            success: (res) => {
                                // 设置分享图片路径
                                resolve(res.tempFilePath);
                            },
                        });
                    });
                },
            });
        });
    }

分享函数

 /**
     * 分享好友、群组
     */
    @Hook
    async onShareAppMessage() {
        const img = await this.getShareImg(
            "https://xxxxxxxxxx.jpg",
        );

        return {
            title: '标题',
            path: `/pages/home/index`,
            imageUrl: img,
        };
    }