微信小程序canvas绘制海报

安装方式 - npm

npm install weapp-canvas-poster --save

使用方法

wxml

<canvas id="share-poster" type="2d" style="width: {{dWidth * dpr}}px; height: {{dHeight * dpr}}px; background: {{background}};"></canvas>

dWidth: cavans宽度（单倍图） dHeight: cavans宽度（单倍图） dpr: 设备像素比 background: canvas背景色(此背景色必须与creatPoster中canvasOptions.background背景色保持一致，否则会找到生成的海报黑屏) 若需要生成二维码，需添加以下代码

<canvas id="share-qrcode" type="2d" style="width: 200px; height: 200px"></canvas>

wxss

canvas {
  position: absolute;
  left: -20000px;
}

js

import { createPoster, PosterType, savePoster, sharePoster } from 'weapp-canvas-poster';

PosterType canvas绘制元素类型 PosterType.Text: 文本类型 PosterType.Image: 图片类型 PosterType.QRCode: 二维码类型 createPoster 生成海报

createPoster({
  canvasId: '#share-poster',
  dpr: 2,
  canvasOptions: {
    background: '#fff', // 必须与canvas背景色保持一致，否则会找到生成的海报黑屏
  },
  list: [
    {
      type: PosterType.Text, // 文本类型
      x: dWidth / 2, // x坐标
      top: 24, // 距顶部距离（y坐标）
      lineHeight: 20, // 行高
      width: dWidth - 24, // 宽度
      fontSize: 14, // 字体大小
      fontWeight: 400, // 文本粗细
      fontFamily: 'PingFang', // 字体
      fillStyle: '#000', // 文字颜色
      textAlign: 'center', // 文本排列
      content: '我们是共产主义接班人！' // 文本内容
    },
    {
      type: PosterType.Image, 图片类型
      x: (dWidth - 101) / 2, // x坐标
      y: 30, // y坐标
      width: 101, // 宽度
      height: 33, // 高度
      src: 'https://www.baidu.com/img/flexible/logo/pc/[email protected]' // 图片url
    },
    {
      type: PosterType.QRCode, // 二维码类型
      x: 80, // x坐标
      y: 80, // y坐标
      width: 160, // 宽度
      height: 160, // 高度
      src: "我们是共产主义接班人！", // 二维码内容
      logo: 'https://assets-img.myazstore.com/miniprogram/aoxingou/images/icons/logo.png', // 二维码logo
      canvasId: '#share-qrcode' // 二维码canvasId
    },
  ]
}, this).then(filePath => {
  // filePath 绘制海报生成图片临时地址，用来展示
  this.setData({
    filePath
  })
}).catch(err => {});

savePoster 保存图片 filePath: createPoster返回的图片临时地址

savePoster(filePath).then((res) => {
  console.log(res);
}).catch(() => {});

sharePoster 分享图片 filePath: createPoster返回的图片临时地址

sharePoster(filePath).then((res) => {
  console.log(res);
}).catch(() => {});