uniapp 使用cavans 生成海报

uniapp 使用cavans 生成海报

npm install qs-canvas

1.创建 useCanvas.js

/**
 * Shopro + qs-canvas 绘制海报
 * @version 1.0.0
 * @author lidongtony
 * @param {Object} options - 海报参数
 * @param {Object} vm - 自定义组件实例
 */
import QSCanvas from 'qs-canvas';
import {
   
    getPosterData } from './poster';

export default async function useCanvas(options, vm) {
   
   
  const width = options.width;
  const qsc = new QSCanvas(
    {
   
   
      canvasId: options.canvasId,
      width: options.width,
      height: options.height,
      setCanvasWH: (canvas) => {
   
   
        options.height = canvas.height;
      },
    },
    vm,
  );

  let drawer = getPosterData(options);

  // 绘制背景图
  const background = await qsc.drawImg({
   
   
    type: 'image',
    val: drawer.background,
    x: 0,
    y: 0,
    width,
    mode: 'widthFix',
    zIndex: 0,
  });
  await qsc.updateCanvasWH({
   
   
    width: background.width,
    height: background.bottom,
  });

  let list = drawer.list;

  for (let i = 0; i < list.length; i++) {
   
   
    let item = list[i];