uniapp app分享小程序卡片模糊的问题

一.业务场景

canvas画出封面，分享到为微信小程序卡片。

二.遇到的问题

1. 开发过程中canvas画完要先转成图片格式（png/jpg）,再保存为本地临时路径，保存的临时路径图片是空白。
2. 生成的临时路径图片清晰，分享到微信后，封面模糊。

三.解决方案

1.临时路径图片空白的问题，网上给的方案大多数是说在canvas.draw的回调函数中执行canvas转图片的方法，并且需要加一个延时，原因是需要确保canvas绘制完成后再执行转图片的方法，生成的图片空白就是因为，在转图片时，canvas还没有绘制完。加延时是因为draw的回调不精确，有时候还没绘制完，就执行回调了，同样会导致图片空白。

        context.draw(false, setTimeout(() => {
              uni.canvasToTempFilePath({})
        }, 300));

2.成功绘制出了图片，分享到微信，小程序卡片非常胡。通过查阅全网，终于在犄角旮旯发现了新大陆，微信对小程序卡片封面大小做了限制，如果图片超过128k会被压缩，导致图片模糊。解决方案就是生成一张小于128k，并且清晰的图片。注意这个封面图长宽比例为5：4。 3.减小图片大小的方法很多，可以减小生成图片的分辨率，或者生成后压缩。uniapp提供了图片压缩的api，但是只支持jpg格式。