小程序二维码海报生成

准备 canvas 元素

<canvas type="2d" id="canvas" style="witdh: 630rpx; height: 920rpx"></canvas>

生成方法 (注 调用的时候需要通过定时器)

   async createBgImg() {
   
      const _this = this;
      // 创建 SelectorQuery 实例
      const query = wx.createSelectorQuery().in(_this);
      // 获取canvas 节点
      query
        .select('#canvas')
        .fields({
   
          node: true,
          size: true,
        })
        .exec(async function (res) {
   
          const canvas = res[0].node;
          // 用于保存二维码海报
           _this.canvasObj = canvas;
          // 设置 canvas 绘图上下文类型
          const ctx = canvas.getContext('2d');
		  // 设置默认 背景色
          ctx.fillStyle = '#e1e4e6';
          // 创建背景图片 对象 
          const img = canvas.createImage();
          // 生成 主背景 
          // _this.shareBallBit 为主背景图 具体应为 一个图片连接
          const bgImg = await _this.getImageInfo(_this.shareBallBit);
          canvas.width = bgImg.width; //重点 图片模糊的解决方法
          canvas.height = bgImg.height;
          const canvasWidth = bgImg.width; // /重点 图片模糊的解决方法
          const canvasHeight = bgImg.height; //重点 图片模糊的解决方法
          _this.style.width = canvasWidth  // 增加 对部分机型保存canvas到相册 图片会截取的bug
          _this.style.height= canvasHeight 
		  // 小程序 协议支持
          img.src = _this.shareBallBit; //.replace(/^http:/, "https:");
          // 绘图
          await _this.drawCanvasImg(ctx, img, 0, 0