GeneB-miniprogram/src/components/customPoster/index.js

import Wxml2Canvas from "./wxml2canvas/index.js"; // 根据具体路径修改，node_modules会被忽略

Component({
  properties: {
    params: {
      type: Object,
      observer(newVal, _olVal) {
        if (Object.keys(newVal).length > 0) {
          this.paramsFormat(newVal);
          this.setData({
            width: newVal.body.width,
            height: newVal.body.height,
            bgImg: newVal.body.bgImg,
            elementsMp: newVal.elements,
          });
          this.drawImage1();
        }
      },
    },
  },
  data: {
    imgUrl: "",
    width: "",
    height: "",
    imgheight: "",
    bgImg: "",
    elementsMp: [],
  },
  lifetimes: {
    attached() {},
  },
  methods: {
    paramsFormat(params) {
      params.elements.forEach((item) => {
        if (item.type === 0) {
          // 图片居中
          if (item.halign === "center") {
            item.left = (params.body.width - item.width) / 2;
          }
        } else {
          item.text = item.text.replace(/[\r\n]/g, "");
          // 文字居中（使文字标签宽度等于画布宽度，文字加上居中的className）
          if (item.halign === "center") {
            item.width = item.width || params.body.width;
            item.left = (params.body.width - item.width) / 2;
          }
          if (item.halign === "right") {
            item.width = params.body.width;
          }
          if (item.id === "shareText" && item.text.length > 30) {
            item.text = item.text.slice(0, 30) + "...";
          }
          if (item.id === "note-title" && item.text.length > 28) {
            item.text = item.text.slice(0, 28) + "...";
          }
          if (item.id === "note-content" && item.text.length > 90) {
            item.text = item.text.slice(0, 90) + "...";
          }
          let len = params.elements.some((x) => x.id === "note-title" && x.text.length);
          if (len && item.id === "note-summary" && item.text.length > 62) {
            item.text = item.text.slice(0, 62) + "...";
          } else if (item.id === "note-summary" && item.text.length > 76) {
            item.text = item.text.slice(0, 76) + "...";
          }
        }
      });
    },
    drawImage1() {
      let self = this;
      this.drawImage1 = new Wxml2Canvas({
        obj: self,
        width: this.data.width, // 宽， 以iphone6为基准，传具体数值，其它机型自动适配
        height: this.data.height, // 高
        element: "canvas1",
        background: "transparent",
        progress(percent) {},
        finish(url) {
          self.setData({
            imgUrl: url,
          });
          self.triggerEvent("finish", url);
        },
        error(res) {},
      });

      let data = {
        list: [
          {
            type: "wxml",
            class: "#canvas-bill-body-mp .draw_canvas",
            limit: "#canvas-bill-body-mp",
            x: 0,
            y: 0,
          },
        ],
      };

      this.drawImage1.draw(data);
    },
  },
});