不太好用canvas 版本

<template>
  <view class="canvas-wrapper">
    <canvas type="2d" @click="save" id="shareImage" v-if="!canvasPath" class="canvas" />
    <img v-if="canvasPath" :src="canvasPath" alt show-menu-by-longpress />
    <!-- <view @click="save" style="position: absolute; bottom: 24px; right: 24px;">
      <img :src="imgUrl" alt style="width:88px;height:88px" show-menu-by-longpress />
    </view>-->
  </view>
</template>

<script>
import { wrapText, roundRect } from "@/utils/canvas";
export default {
  data() {
    return {
      dpr: "",
      canvasPath: "",
      imgUrl: "https://res.zhixinren.work/prod/5c19e3ea-397d-4fa4-992a-89b60d6f94df/0b1ffd9d-71cd-4bd5-b8de-a5a328b3877c.png",
      erweimaCode: "https://res.zhixinren.work/prod/5c19e3ea-397d-4fa4-992a-89b60d6f94df/0b1ffd9d-71cd-4bd5-b8de-a5a328b3877c.png",
      imgBack: "https://res.zhixinren.work/prod/93e10b03-4abf-4a42-bfb8-e9e6021539bb/52df853c-d6d7-4100-b26b-b55b4536af2a.png",
      logo: "https://res.zhixinren.work/prod/efff0f1d-5bd5-449d-a302-d67b0caa1c7f/caf56d6c-eff4-4646-8656-4d084d526052.png",
      windowWidth: 0,
      windowHeight: 0,
      pixelRatio: 0,
      canvas: null
    };
  },
  onLoad() {},
  created() {
    const systeminfo = wx.getSystemInfoSync();
    this.windowWidth = systeminfo.windowWidth;
    this.windowHeight = systeminfo.windowHeight;
    this.pixelRatio = systeminfo.pixelRatio;
  },
  mounted() {
    this.goCanvas();
    // this.renderCanvas();
  },
  methods: {
    async goCanvas() {
      const imgBack = await this.handleNetImg(`${this.imgBack}`);
      const logo = await this.handleNetImg(`${this.logo}`);
      const erweimaCode = await this.handleNetImg(`${this.erweimaCode}`);
      this.renderCanvas(imgBack.path, logo.path, erweimaCode.path);
    },
    // 二维码图片
    handleNetImg(imageUrl) {
      const that = this;
      return new Promise((resolve, reject) => {
        // console.log("imageUrl1", imageUrl);
        uni.getImageInfo({
          src: imageUrl,
          success: function(res) {
            resolve(res);
          },
          fail: function(err) {
            reject(err);
          }
        });
      });
    },
    save() {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.windowWidth,
        height: this.windowHeight,
        destWidth: this.windowWidth,
        destHeight: this.windowHeight,
        canvas: this.canvas, // 现在的写法
        quality: 1,
        success: res => {
          console.log(res.tempFilePath);
          this.canvasPath = res.tempFilePath;
          // wx.saveImageToPhotosAlbum({
          //   filePath: res.tempFilePath,
          //   success: () => {
          //     uni.showToast({
          //       title: "保存成功",
          //       duration: 2000,
          //       icon: null
          //     });
          //   }
          // });
        }
      });
    },
    renderCanvas(imgBack, logo, erweimaCode) {
      const query = wx.createSelectorQuery();
      query
        .select("#shareImage") // 选择我们的canvas节点
        .fields({
          // 需要获取的节点相关信息
          node: true, // 是否返回节点对应的 Node 实例
          size: true // 是否返回节点尺寸（width height）
        })
        .exec(res => {
          const dom = res[0]; // 因为页面只存在一个画布，所以我们要的dom数据就是 res数组的第一个元素
          const canvas = dom.node; // canvas就是我们要操作的画布节点
          this.canvas = canvas;
          const ctx = canvas.getContext("2d");

          const dpr = this.pixelRatio;
          const width = this.windowWidth;
          const height = this.windowHeight;

          canvas.width = width * dpr;
          canvas.height = height * dpr;
          ctx.scale(dpr, dpr);

          // 背景图
          const backImg = canvas.createImage();
          backImg.src = "/shareCanvas/img/back.png";
          backImg.onload = () => {
            ctx.drawImage(backImg, 0, 0, width, height - 130);

            // 绘制圆角矩形背景
            roundRect(ctx, 16, 48, width - 16 * 2, 224, 8);

            // 绘制职位信息
            const startW = 16 + 16;
            const startH = 48 + 24;
            const nametxt = "产品经理123";
            const nameWidth = ctx.measureText(nametxt).width;
            ctx.font = "normal bold 16px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#3C3D43";
            ctx.fillText(nametxt, startW, startH, nameWidth, 16);

            // 急招标签
            const jzTag = true;
            if (jzTag) {
              // box
              roundRect(ctx, startW + nameWidth + 8, startH, 32, 16, 2, "#FF8657");
              // boxText
              ctx.font = "normal normal 10px sans-serif";
              ctx.textBaseline = "top";
              ctx.fillStyle = "#fff";
              ctx.fillText("急招", startW + nameWidth + 8 + 6, startH + 4, 32, 16);
            }

            // 全职标签
            const qzTag = true;
            if (qzTag) {
              // box
              const qzstartW = jzTag ? startW + nameWidth + 8 + 32 : startW + nameWidth + 8;
              roundRect(ctx, qzstartW + 8, startH, 32, 16, 2, "#fff", 1, "#4686FF");
              // boxText
              ctx.font = "normal normal 10px sans-serif";
              ctx.textBaseline = "top";
              ctx.fillStyle = "#4686FF";
              ctx.fillText("全职", qzstartW + 8 + 6, startH + 4, 32, 16);
            }

            // 城市
            const cityTxt = "山东省 青岛市";
            const cityWidth = ctx.measureText(cityTxt).width;
            const citystartW = width - 16 - 16 - cityWidth;
            ctx.font = "normal normal 12px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#ACAFC5";
            ctx.fillText(cityTxt, citystartW, startH + 4, cityWidth, 16);

            // 钱数money
            const moneystartH = startH + 16 + 12;
            const moneyTxt = "6000-7000元";
            const moneyWidth = ctx.measureText(moneyTxt).width;
            ctx.font = "normal bold 18px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#3070FF";
            ctx.fillText(moneyTxt, startW, moneystartH, moneyWidth, 18);

            // 第三行 年限等
            const yearstartH = moneystartH + 18 + 12;
            const yearTxt = "3-5年wqe";
            const yearWidth = ctx.measureText(yearTxt).width;
            ctx.font = "normal normal 12px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#767885";
            ctx.fillText(yearTxt, startW, yearstartH, yearWidth, 12);

            // |
            ctx.font = "normal normal 12px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#767885";
            ctx.fillText("|", startW + yearWidth - 9, yearstartH, 1, 12);
            // 学历
            const xueliTxt = "专科以上";
            const xueliWidth = ctx.measureText(xueliTxt).width;
            ctx.font = "normal normal 12px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#767885";
            ctx.fillText(xueliTxt, startW + yearWidth + 8 + 1, yearstartH, xueliWidth, 12);
            // 五险一金标签;
            const wxyjTag = true;
            const wxyjArr = ["五险一金123", "定期体检", "管吃管住"];
            if (wxyjTag) {
              const framePending = 8;
              const textPending = 8;
              let offsetX = startW;
              wxyjArr.map((i, index) => {
                const frameWidth = ctx.measureText(i).width + textPending * 2;

                ctx.font = "normal normal 12px sans-serif";
                ctx.textBaseline = "top";
                ctx.fillStyle = "#4686FF";
                ctx.fillText(i, offsetX + 8, startH + 83 + 5, ctx.measureText(i).width, 20);
                // box
                roundRect(ctx, offsetX, yearstartH + 12 + 12, frameWidth, 22, 2, "rgba(70, 134, 255, 0.1)", 1, "rgba(70, 134, 255, 0.6)");
                offsetX += frameWidth + framePending;
              });
            }

            // 横线
            roundRect(ctx, startW, yearstartH + 12 + 12 + 22 + 12, width - 16 * 4, 0.5, 0, "#E3E6F1");

            // 公司信息
            const companystartH = yearstartH + 12 + 12 + 22 + 12 + 16;
            const companyImg = canvas.createImage();
            companyImg.src = this.imgUrl;
            companyImg.onload = () => {
              ctx.drawImage(companyImg, startW, companystartH, 48, 48);
            };
            // 公司名称
            const companyTxt = "网络科技有限公司";
            const companyWidth = ctx.measureText(companyTxt).width;
            ctx.font = "normal 500 14px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#55565D";
            ctx.fillText(companyTxt, startW + 48 + 8, companystartH + 5, companyWidth, 14);
            // 行业
            const industryTxt = "青岛市 互联网";
            const industryWidth = ctx.measureText(industryTxt).width;
            ctx.font = "normal 400 12px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#767885";
            ctx.fillText(industryTxt, startW + 48 + 8, companystartH + 5 + 14 + 12, industryWidth, 14);
            //
            const enterpriseTxt = "企业服务";
            const enterpriseWidth = ctx.measureText(enterpriseTxt).width;
            ctx.font = "normal 400 12px sans-serif";
            ctx.textBaseline = "top";
            ctx.fillStyle = "#767885";
            ctx.fillText(enterpriseTxt, startW + 48 + 8 + industryWidth + 5, companystartH + 5 + 14 + 12, enterpriseWidth, 14);
          };
          // roundRect(ctx, 0, height - 130, width, height - 130, 0, "#fff");
          // Logo
          const logoImg = canvas.createImage();
          logoImg.src = "/shareCanvas/img/logo.png";
          logoImg.onload = () => {
            ctx.drawImage(logoImg, 16, height - 114, 86, 28);
          };

          // btn
          roundRect(ctx, 16, height - 70, 120, 28, 0, "#fff", 2, "#3070FF");

          // btnText
          ctx.font = "normal normal 14px sans-serif";
          ctx.textBaseline = "top";
          ctx.fillStyle = "#3070FF";
          ctx.fillText("长按识别二维码", 27, height - 63);

          // tip
          ctx.font = "normal normal 14px sans-serif";
          ctx.textBaseline = "top";
          ctx.fillStyle = "#55565D";
          ctx.fillText("进入小程序查看招聘详情", 16, height - 26);

          //
          const ercodeImg = canvas.createImage();
          ercodeImg.src = this.erweimaCode;
          ercodeImg.onload = () => {
            ctx.drawImage(ercodeImg, width - 16 - 88, height - 26 - 88, 88, 88);
          };
          const _this = this;
          setTimeout(function() {
            _this.save();
          }, 5000);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .canvas {
    width: 100%;
    height: 100%;
  }
}
img {
  width: 100%;
  height: 100vh;
}
</style>