当前位置: 首页 » 笔记 » 微信小程序canvas初始化、绘图、保存

微信小程序canvas初始化、绘图、保存

零分笔记2,6362022-11-06 23:15

微信小程序canvas初始化、绘图、保存,记录保存一下

canvas初始化

/***初始化canvas */
    initCanvas(){
        // 通过 wx.createSelectorQuery()方法创建
        const query = wx.createSelectorQuery()
        query.select('#myCanvas') // canvas id
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')
            const dpr = wx.getSystemInfoSync().pixelRatio // 屏幕比例
            canvas.width = res[0].width * dpr
            canvas.height = res[0].height * dpr
            // 存入data 后面用到
            this.setData({
              ctx:ctx,
              canvas:canvas,
              cW:res[0].width * dpr,
              cH:res[0].height * dpr
            })
          })
         
      },

canvas绘图

/***绘制图画 */
      drawImg(x,y,Hx,Hy,CW){
          let that=this;
        const {ctx,canvas} = this.data 
        // 创建 image对象,因为新的canvas API ,在调用drawImage的时候需要传入一个image对象。
        const img = canvas.createImage()
        // 这个url地址,可以是微信获取头像的临时地址
        img.src = this.data.loadSrc
        img.onload = function() {
          // 图片加载后画
        //   ctx.drawImage(img, x, y,Hx,Hy)
        ctx.save();
        ctx.beginPath();
          ctx.arc(CW/2,CW/2,CW/2,0,2*Math.PI,false)
          ctx.clip();
          ctx.drawImage(img, x, y, Hx, Hy); // 推进去图片        
          ctx.closePath();
          ctx.restore();
          that.saveImgs();
        }
    },

canvas保存图片

 /***保存图片 */
saveimg:function() {

        let dpr = wx.getSystemInfoSync().pixelRatio // 屏幕比例

        let Hx=this.data.scaleWidth*dpr;

        let Hy=this.data.scaleHeight*dpr;

        let x=this.data.marginLeft*dpr;

        let y=this.data.marginTop*dpr;

        let cw=this.data.cW

        console.log(this.data.cH)

        console.log(this.data.cW)

        this.drawImg(x,y,Hx,Hy,cw)

       console.log(this.data.ctx);

       console.log(this.data.canvas.id);

    },

    async saveImgs() {

        let self = this;

        //这里是重点  新版本的type 2d 获取方法

        const query = wx.createSelectorQuery();

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

          query.select('#myCanvas')

            .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: 5000,

                })

                // 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)

      },

    

END
零分站龄17年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
2513
文章
13
分类
3813
标签
3
友链
onlinelovesky317355746vipsever@vip.qq.com