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
