美文网首页
新的canvas2D API

新的canvas2D API

作者: 下班再说 | 来源:发表于2022-06-29 11:53 被阅读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)

      },

    相关文章

      网友评论

          本文标题:新的canvas2D API

          本文链接:https://www.haomeiwen.com/subject/hgmtbrtx.html