E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册

E企盈直播平台营销卖货系统

1.获取手机宽度 进而设置canvas画布的宽度onLoad() {    let that = this;    // 获取系统信息,设置canvas宽高    wx.getSystemInfo({      success(res) {        that.setData({          canvasWidth: res.windowWidth        })      }    })   },2.获取图片信息 将图片保存到本地路径然后再去绘制, 不然容易出现canvas画不上然后保存图片到本地时候出现空白的问题  make:function(url){    var that=this;    console.log(url);     //获取图片信息     wx.getImageInfo({       src: url,       success: function(res){         console.log(JSON.stringify(res));         that.setData({           imgInfo:res         });         console.log(JSON.stringify(that.data.imgInfo));         let imageSize = util.imageZoomHeightUtil(that.data.imgInfo.width, that.data.imgInfo.height);//根据屏幕宽度          that.setData({ canvasHeight: imageSize.imageHeight });         console.log(‘imageSize等比例’ + JSON.stringify(imageSize));         that.makeCanvas(url);       }     })  },3.开始绘制图 ctx.draw(false, this.drawCallBack)一定要执行后面的回调函数makeCanvas: function (url) {    var ctx = wx.createCanvasContext(‘canvas’)    ctx.drawImage(url, 0, 0, this.data.imgInfo.width, this.data.imgInfo.height, 0, 0, this.data.canvasWidth, this.data.canvasHeight);    ctx.draw(false, this.drawCallBack)  },  drawCallBack: function () {    var that = this    wx.canvasToTempFilePath({      x: 0,      y: 0,      width: that.data.canvasWidth,      height: that.data.canvasHeight,      canvasId: ‘canvas’,      fileType: ‘jpg’,      success: function (res) {        // wx.hideLoading();        that.setData({          ‘img’: res.tempFilePath        });        console.log(‘ok’);      },      fail: function (res) {        wx.hideLoading();        wx.showToast({          icon: ‘none’,          title: ‘生成失败!’,        });      }    })  }, 完整demo源码下载地址:https://download.csdn.net/download/lmx15063393957/11259093

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏