canvas（背景图片、图片、文字）

<view class="canvasCont">
      <canvas
        type="2d"
        id="myCanvas"
        class="canvas_view"
        :style="{ width: canvasDisplayW + 'px', height: canvasDisplayH + 'px' }"
      >
      </canvas>
    </view>

myCanvas: null,
myCtx: null,
dpr: null,
canvasDisplayW: 340,
canvasDisplayH: 463,
canvasImg:''

 onShow() {
    this.initCanvas();
  },

// 初始化canvas
    async initCanvas() {
      const _ = this;
      return new Promise((resolve, reject) => {
        // 若在自定义组件中，此处应写为this.createSelectorQuery();
        const query = _.createSelectorQuery();
        query
          .select("#myCanvas")
          .fields({
            node: true,
            size: true,
          })
          .exec(async (res) => {
            try {
              console.log(res, "-=-=res");
              let myCanvas = res[0].node;
              let myCtx = myCanvas.getContext("2d");
              // myCtx.font = "10px";
              const dpr = uni.getSystemInfoSync().pixelRatio;
              const windowWidth = uni.getSystemInfoSync().windowWidth;
              this.myCanvas = myCanvas;
              this.myCtx = myCtx;
              this.dpr = dpr;
              this.windowWidth = windowWidth;
              console.log(this.myCanvas, "123");
              await this.handelCode();
              await this.getCanvas();
              resolve();
            } catch (error) {
              if (this.myCanvas) {
                uni.showModal({
                  title: "实例化失败",
                  content: JSON.stringify(
                    String(error) + JSON.stringify(this.myCanvas)
                  ),
                  success() {},
                });
              } else {
                uni.showModal({
                  title: "实例化失败",
                  content: JSON.stringify(String(error)),
                  success() {},
                });
              }
              reject();
            }
          });
      });
    },
    // 生成门店二维码
    async getCanvas() {
      try {
        const _ = this;
        const dpr = _.dpr;
        if (!_.myCanvas) {
          await _.initCanvas();
        }
        let canvas = _.myCanvas;
        canvas.width = this.canvasDisplayW;
        canvas.height = this.canvasDisplayH;
        let ctx = _.myCtx;
        uni.showLoading({
          title: "二维码生成中~",
          mask: true,
        });
        // 2. 生成图片
        let image = canvas.createImage();
        image.src ='这个背景图片，可以找专门生成base64图片的工具，生成一下';
        (image.onload = () => {
          ctx.drawImage(image, 0, 0, _.canvasDisplayW, _.canvasDisplayH);
          let image1 = canvas.createImage();
          image1.src = _.codeImg;
          (image1.onload = () => {
            ctx.drawImage(image1, 90, 111, 160, 160);
            ctx.font = `normal normal 16px PingFangSC-Regular`;
            ctx.fillStyle = "#000";
            ctx.textAlign = "center";
            ctx.fillText(_.storeName, canvas.width / 2, 290);
            uni.hideLoading();
            // 4. 将canvas转为图片
            setTimeout(() => {
              uni.canvasToTempFilePath({
                destWidth: canvas.width,
                destHeight: canvas.height,
                // quality: 0.5,
                canvas: canvas,
                fileType: "jpg",
                success(res) {
                  console.log(res, "88888***");
                  _.canvasImg = res.tempFilePath
                  // uni.compressImage({
                  //   src: res.tempFilePath, // 图片路径
                  //   // quality: 50, // 压缩质量
                  //   success: (e) => {
                  //     console.log(e, "-=e");
                  //     //   resolve(e.tempFilePath);
                  //   },
                  // });
                },
                fail(error) {
                  uni.hideLoading();
                  console.log("生成图片出错了", error);
                  uni.showModal({
                    title: "生成图片出错了~",
                    content: JSON.stringify(error),
                    success() {},
                  });
                  //   reject(error);
                },
              });
            }, 500);
          }),
            (image1.onerror = (e) => {
              uni.hideLoading();
              console.log("图片加载失败", e);
              // reject(new Error("图片资源加载失败"));
            });
        }),
          // ✅ 添加加载失败处理
          (image.onerror = (e) => {
            uni.hideLoading();
            console.log("图片加载失败", e);
            // reject(new Error("图片资源加载失败"));
          });
        console.log(ctx);
        //   image.src = img;
      } catch (error) {
        console.log(error, "===");
        uni.showModal({
          title: "添加水印失败~",
          content: JSON.stringify(String(error)),
          success() {},
        });
      }
    },

saveStoreCode1(){
      let _this=this
      uni.saveImageToPhotosAlbum({
            filePath: _this.canvasImg,
            success: (res2) => {
              toast("保存成功");
            },
            fail: (err2) => {
              console.log(err2, "图片保存失败原因！");
            },
            complete: () => {},
          });
    },