收藏
回答

canvas 2d crteateImage onload 无法执行?

仓库地址 https://git.weixin.qq.com/qianyeyixi/test_canvas_img.git

  async chooseImags() {
    const data = await wx.chooseImage({
      count1,
      sizeType: ["original""compressed"],
      sourceType: ["album""camera"],
    })
    console.log(data);
    const ImgObj = await wx.getImageInfo({
      src: data.tempFilePaths[0],
    })
    this.setData({
      imgSrc: ImgObj.path,
      imgWidth: ImgObj.width,
      imgHeight: ImgObj.height
    })
    console.log(ImgObj);
    console.log(this.data.frameSrc);
    const frameObj = await wx.getImageInfo({
      srcthis.data.frameSrc
    })
    console.log(frameObj);


    this.setData({
      ImgObj,
      frameObj
    })


  },
  saveImgToPhone() {
    const t = this;
    const i = this.ctx;
    const c = this.canvasNode;
    wx.showLoading({
      title"生成中",
    });
    let {ImgObj, frameObj} = this.data
    let _offsetX = Math.abs((frameObj.width - ImgObj.width) / 2);
    let _offsetY = Math.abs((frameObj.height - ImgObj.height) / 2);
    let _width = Math.max(ImgObj.width, frameObj.width);
    let _height = Math.max(ImgObj.height, frameObj.height);
    let framImgEl = c.createImage();
    console.log("framImgEl start", framImgEl);
    framImgEl.onLoad = () => {
      i.drawImage(
        framImgEl,
        0,
        0,
        _width,
        _height,
        0,
        0,
        frameObj.width,
        frameObj.height
      );
    };
    framImgEl.onerror = (e) => {
      console.log("framImgEl err", framImgEl, e);
    }
    framImgEl.src = frameObj.path;


    let imgEl = c.createImage();
    console.log("imgEl start", imgEl);
    imgEl.onerror = (e) => {
      console.log("imgEl err", imgEl, e);
    }
    console.log("imgEl create", imgEl);


    imgEl.onLoad = () => {
      console.log("imgEl", imgEl);
      i.drawImage(
        imgEl,
        _offsetX,
        _offsetY,
        imgInfo.width,
        imgInfo.height
      );
    };
    imgEl.src = ImgObj.path;
    setTimeout(() => {
      t.getTemFile({
        width: _width,
        height: _height
      })
    }, 800)
  },
  getTemFile(options) {
    console.log("getTemFile 触发", options);
    let t = this;
    let c = this.canvasNode;
    wx.canvasToTempFilePath({
        canvas: t.canvasNode,
      })
      .then((res) => {
        console.log("getTemFile success", res);
        wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
          })
          .then((_res) => {
            wx.hideLoading()
            console.log(" _res", _res);
          })
          .catch((err) => {
            console.log("err", err);
          })
      })
      .catch((err) => {
        console.log("getTemFile err", err);
      });
  },
并没有 打印onload 里边的参数 导出是空白
回答关注问题邀请回答
收藏

1 个回答

  • 松岗
    松岗
    2021-12-24

    onload的l是小写,

    2021-12-24
    有用
    回复
登录 后发表内容