1.获取手机宽度进而设置canvas画布的宽度
onLoad(){letthat=this;//获取系统信息，设置canvas宽高wx.getSystemInfo({success(res){that.setData({canvasWidth:res.windowWidth})}})},2.获取图片信息将图片保存到本地路径然后再去绘制,不然容易出现canvas画不上然后保存图片到本地时候出现空白的问题
make:function(url){varthat=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));letimageSize=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){varctx=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(){varthat=thiswx.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
