新的canvas2D API

2022-06-29  本文已影响0人  下班再说

//可以直接img.onload调用const headerImg = canvas.createImage();

headerImg.src = headImage;//微信请求返回头像headerImg.onload = ()=> {

    ctx.save();

    ctx.beginPath()//开始创建一个路径    ctx.arc(38, 288, 18, 0, 2 * Math.PI, false)//画一个圆形裁剪区域    ctx.clip()//裁剪    ctx.drawImage(headerImg,0,0);

    ctx.closePath();

    ctx.restore();

}

async saveImg() {

    let self = this;

    //这里是重点  新版本的type 2d 获取方法    const query = wx.createSelectorQuery();

    const canvasObj = await new Promise((resolve, reject) => {

      query.select('#posterCanvas')

        .fields({ node: true, size: true })

        .exec(async (res) => {

          resolve(res[0].node);

        })

    });

    console.log(canvasObj);

    wx.canvasToTempFilePath({

      //fileType: 'jpg',      //canvasId: 'posterCanvas', //之前的写法      canvas: canvasObj, //现在的写法      success: (res) => {

        console.log(res);

        self.setData({ canClose: true });

        //保存图片        wx.saveImageToPhotosAlbum({

          filePath: res.tempFilePath,

          success: function(data){

            wx.showToast({

              title: '已保存到相册',

              icon: 'success',

              duration: 2000            })

            // setTimeout(() => {            //  self.setData({show: false})            // }, 6000);          },

          fail: function(err){

            console.log(err);

            if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {

              console.log("当初用户拒绝,再次发起授权")

            } else {

              util.showToast("请截屏保存分享");

            }

          },

          complete(res) {

            wx.hideLoading();

            console.log(res);

          }

        })

      },

      fail(res) {

        console.log(res);

      }

    }, this)

  },

上一篇下一篇

猜你喜欢

热点阅读