当前位置: 首页 » 标签:canvas

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

微信小程序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)      },    笔记28天前
零分站龄5个月资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
323
文章
8
分类
125
标签
2
友链
onlinelovesky317355746vipsever@vip.qq.com