Taro小程序生成带二维码的海报图

需要在小程序内生成一张海报图，并且海报图里需要填入一个二维码，并且二维码里是带着参数的，比如原始推广人的id，有效时间等

海报图生成

海报图好解决，使用canvas

const width = this.canvas.width;
const height = this.canvas.height;
const posterBg = this.canvas.createImage();
posterBg.src = `xxxxxx`;
posterBg.onload = () => {
     this.ctx.drawImage(posterBg, 0, 0, width, height);
    
    // 根据业务自行填充海报图里的其他文案
     this.ctx.fillStyle = '#fff';
     this.ctx.font = '42px PingFang SC';
     this.ctx.textAlign = 'center';
     this.ctx.fillText('xxxxx', width / 2, 600);
}

坑点1

因为用的UI的切图，图片很大，加载后发现实际出来的图很糊
是因为canvas有两个宽高，一个是css里的宽高，还有一个是画布的宽高，如果仅设置了css里的宽高，按照上述代码，画布的默认宽高会比css样式里的宽高还要小很多，此时画布小，缩放了图片，再拉伸至css的宽高导致的模糊

解决

css的canvas宽高不动，画布的宽高设置为UI设计稿上海报图的宽高

坑点2

文案的填充必须要放在图片的onload里，等图片画上去了后再填充文案，否则图片会盖住文案

二维码

要在海报图里嵌入二维码，这里用的是taro-code这个库
https://github.com/Miaonster/taro-code
但是发现他index.ts里导出的只有组件，没有专门写二维码的

阅读源码后发现他导出的组件有两种类型的，一种是Image，一种是Canvas

image.png

即便是Image类型的也是组件，而我在海报图的canvas里只需要二维码的url或者base64，不需要组件，所以顺着这块代码发现了图片来自于这个函数

image.png

所以导入时改成以下方式即可，参数按照上图里传入，获取到的即是base64

import { createQrCodeImg } from 'taro-code/lib/common/qrcode/index';

再用createImage，drawImage填入即可