lilishop-uniapp/components/m-canvas/index.vue

<template>

  <div class="index">
    <u-modal v-model="show" :show-title="false" :show-confirm-button="false" mask-close-able>
      <view class="slot-content">
        <image @click="downLoad()" class="img" :src="imgUrl" />
        <div class="canvas-hide">
          <!-- #ifdef MP-WEIXIN -->
          <canvas id="canvas" type="2d" style="width: 600px; height: 960px" />
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <canvas canvas-id="canvas" id="canvas" style="width: 600px; height: 960px" />
          <!-- #endif -->
        </div>
      </view>
    </u-modal>

  </div>
</template>
<script>
// 引入绘制插件
import DrawPoster from "@/js_sdk/u-draw-poster";

export default {
  data: () => ({
    imgUrl: "", //绘制出来的图片路径
    show: false, //是否展示模态框
    dp: {}, //绘制的dp对象，用于存储绘制等一些方法。
    logo: require("@/pages/passport/static/logo-title.png"), //本地logo地址
  }),

  props: {
    /**
     * 父级传参的数据
     */
    res: {
      type: null,
      default: "",
    },
  },
  onUnload() {},

  methods: {
    /**
     * 解决微信小程序中图片模糊问题
     */
    // #ifdef MP-WEIXIN
    st2: (size) => size * 2,
    // #endif

    // #ifndef MP-WEIXIN
    st2: (size) => size,
    // #endif

    /**
     * 保存图片
     */
    downLoad() {
      uni.saveImageToPhotosAlbum({
        filePath: this.imgUrl,
        success: function () {
          uni.showToast({
            title: "保存成功！",
            icon: "none",
          });
        },
        fail: function () {
          uni.showToast({
            title: "保存失败，请稍后重试！",
            icon: "none",
          });
        },
      });
    },

    /**
     * 创建canvas
     */
    async init() {
      this.show = true;
      this.dp = await DrawPoster.build({
        selector: "canvas",
        componentThis: this,
        loading: true,
        debugging: true,
      });
      let dp = this.dp;
      // #ifdef MP-WEIXIN
      // 用于微信小程序中画布错乱问题
      dp.canvas.width = this.st2(600);
      dp.canvas.height = this.st2(960);
      // #endif
      this.draw(dp);
    },

    async draw(dp) {
      const { width, height, background, title } = this.res.container;
      const { code, img, price } = this.res.bottom;

      // /** 绘制背景 */
      await dp.draw((ctx) => {
        ctx.fillStyle = background;
        ctx.fillRoundRect(
          this.st2(0),
          this.st2(0),
          this.st2(width),
          this.st2(height),
          this.st2(12)
        );
        ctx.clip();
      });
      /** 绘制图片 */
      dp.draw(async (ctx) => {
        await Promise.all([
          // 绘制Logo
          ctx.drawImage(
            this.logo,
            this.st2(175),
            this.st2(0),
            this.st2(256),
            this.st2(144)
          ),
          // 中间图片
          ctx.drawImage(
            img,
            this.st2(100),
            this.st2(150),
            this.st2(400),
            this.st2(400)
          ),
          // 二维码
          ctx.drawImage(
            code,
            this.st2(39),
            this.st2(750),
            this.st2(150),
            this.st2(150)
          ),
        ]);
      });

      /** 绘制中间文字*/
      await dp.draw((ctx) => {
        ctx.fillStyle = "#333";
        ctx.font = `bold ${this.st2(24)}px PingFang SC`;
        ctx.textAlign = "center";
        ctx.fillWarpText({
          text: title,
          maxWidth: this.st2(500),
          x: this.st2(300),
          y: this.st2(600),
          layer: 1,
        });

        ctx.fillStyle = "#ff3c2a";
        ctx.font = `${this.st2(38)}px PingFang SC`;
        ctx.textAlign = "center";
        ctx.fillText(price, this.st2(300), this.st2(680));
      });

      // /** 绘制底部文字 */
      await dp.draw((ctx) => {
        ctx.fillStyle = "#666";
        ctx.font = `${this.st2(24)}px PingFang SC`;
        ctx.fillText("长按图片，识别二维码", this.st2(200), this.st2(866));
        ctx.fillStyle = "#666";
        ctx.font = `${this.st2(24)}px PingFang SC`;
        ctx.fillText("查看商品详情", this.st2(200), this.st2(900));
      });

      this.imgUrl = await dp.createImagePath();

      // console.log(posterImgUrl)
    },
  },

  async mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
page,
.index {
  height: 100%;
}
.canvas-hide {
  /* 1 */
  position: fixed;
  right: 100vw;
  bottom: 100vh;
  /* 2 */
  z-index: -9999;
  /* 3 */
  opacity: 0;
}
.index {
  position: relative;
  text-align: center;
  background: rgba($color: grey, $alpha: 0.2);
}

image {
  display: block;
}
.img {
  width: 600rpx;
  height: 960rpx;
}
</style>