WeChat applet canvas drawing poster component based on Taro framework

The project needs to save the payment code, the effect is as shown in the figure:

(This article only represents personal daily work records, and the description of limited capabilities is not comprehensive)

1. Install npm i taro-plugin-canvas -S --production (taro-plugin-canvas is a WeChat applet canvas drawing component based on the Taro framework, which encapsulates common operations and generates shared pictures by configuration)

 2. Import: import { TaroCanvasDrawer } from "../../customComponents/taro-plugin-canvas"

 3. Use:

  // 绘制成功回调函数 （必须实现）=> 接收绘制结果、重置 TaroCanvasDrawer 状态
  onCreateSuccess = result => {
    console.log(result, "result");
    const { tempFilePath, errMsg } = result;
    Taro.hideLoading();
    if (errMsg === "canvasToTempFilePath:ok") {
      this.setState(
        {
          shareImages: tempFilePath,
          // 重置 TaroCanvasDrawer 状态，方便下一次调用
          canvasStatus: false,
          canvasConfig: null
        },
        () => {
          this.saveToAlbum();
        }
      );
    } else {
      // 重置 TaroCanvasDrawer 状态，方便下一次调用
      this.setState({
        canvasStatus: false,
        canvasConfig: null
      });
      Taro.showToast({ icon: "none", title: errMsg || "出现错误" });
      console.log(errMsg);
    }
  };

  // 绘制失败回调函数 （必须实现）=> 接收绘制错误信息、重置 TaroCanvasDrawer 状态
  onCreateFail = error => {
    Taro.hideLoading();
    // 重置 TaroCanvasDrawer 状态，方便下一次调用
    this.setState({
      canvasStatus: false,
      canvasConfig: null
    });
    console.log(error);
  };

    const canvasConfig = {
      width: 600,
      height: 860,
      backgroundColor: "#fff",
      debug: false,
      blocks: [{}],
      images: [
        {
          x: 0,
          y: 0,
          width: 600,
          height: 860,
          paddingLeft: 0,
          paddingRight: 0,
          borderWidth: 0,
          url: "图片链接",
          borderRadius: 10,
        },
        {
          x: 100,
          y: 160,
          width: 400,
          height: 400,
          url: code, //二维码图片 
          zIndex: 9999,
        }
      ],
      texts: [
        {
          x: 300,
          y: 90,
          text: `使用线下扫码支付`,
          fontSize: 48,
          color: "#fff",
          baseLine: "middle",
          lineHeight: 38,
          textAlign:'center',
          fontWeight:'bold',
          lineNum: 1,
          // width: 400,
          letterSpacing: 10,
          zIndex: 999
        },
      ]
    };

 <TaroCanvasDrawer
    config={canvasConfig} // 绘制配置
    onCreateSuccess={this.onCreateSuccess} // 绘制成功回调
    onCreateFail={this.onCreateFail} // 绘制失败回调
  />

4. Browse through the WeChat applet canvas drawing component based on the Taro framework-Dianquan.com is  very comprehensive