2.uniapp--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: () => {},          });    },