基于 Taro 框架的微信小程序 canvas 绘图海报组件

项目需要保存收款码，效果如图:

（此文仅代表个人日常工作记录，能力有限描述并不全面）

1.安装 npm i taro-plugin-canvas -S --production（taro-plugin-canvas 是基于 Taro 框架的微信小程序 canvas 绘图组件，封装了常用的操作，通过配置的方式生成分享图片）

 2.引入：import { TaroCanvasDrawer } from "../../customComponents/taro-plugin-canvas"

 3.使用：

  // 绘制成功回调函数 （必须实现）=> 接收绘制结果、重置 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.翻阅基于 Taro 框架的微信小程序 canvas 绘图组件-面圈网 非常全面