<view class="canvas-box"> <canvas class="canvas" canvas-id="shareImg" style="width: {{width}}px; height: {{height}}px;z-index: 100;"> </canvas> </view> <view class="btn-box"> <view bindtap="saveImageToLocal"> <view>保存海报</view> </view> </view> 复制代码
//获取屏幕宽度,获取自适应单位 wx.getSystemInfo({ success: function(res) { var num = (res.windowWidth/375).toFixed(2) this.setData({rpx: num}) } }) var rpx = _this.data.rpx //给宽高赋值 this.setData({height: rpx*350}) this.setData({width: rpx*250}) this.setData({leftWidth: rpx*60}) this.setData({topHeight: rpx*110}) 复制代码
//获取二维码图片 wx.downloadFile({ url: url, success (res) { _this.setData({tempFilePath: res.tempFilePath}) }, fail (err) { console.log(err,'err') } }) 复制代码
4.用canvas画图
//在自定义组件中使用canvas,获取wx.createCanvasContext第二个参数必须传入this,不然获取不到 const ctx = wx.createCanvasContext('shareImg',_this); //绘制一个白色矩形 ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, _this.data.width, _this.data.height); //绘制背景图 ctx.drawImage( _this.data.wxBgImg, //背景图 0, //目标图片在画布中x坐标 0, //目标图片在画布中y坐标 _this.data.width, //目标图片宽 250*rpx //目标图片高 ); // 绘制想要的文字 ctx.setFontSize(16); ctx.setFillStyle('black'); ctx.fillText('请扫码购买', 70*rpx, 300*rpx); ctx.stroke(); // 画(前面都是准备,这才是画的那一步) ctx.draw(false,_this.canvasToImage()); 复制代码
//画二维码 canvasToImage: function () { var _this = this; base.hideLoading() //这里必须加一个定时器,不然会生成图片失败 setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'shareImg', width: _this.data.width, height: _this.data.height, destWidth: _this.data.width*4,//输出的图片的宽度是画布区域的宽度的4倍 destHeight: _this.data.height*4,//输出的图片的高度是画布区域的高度的4倍 success: res => { console.log(res,'画二维码====成功') _this.setData({ resultImage: res.tempFilePath }); }, fail: (err) => { console.log(err,"err==========") wx.showToast({ title: '图片生成失败', icon: 'success', duration: 2000 }); } },this);//在自定义组件中使用canvas,获取wx.canvasToTempFilePath第二个参数必须传入this,不然获取不到 }, 2000); 复制代码
//保存图片 saveImageToLocal() { wx.saveImageToPhotosAlbum({ filePath: this.data.resultImage, success: res => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); }, fail() { wx.showToast({ title: '保存失败', duration: 2000 }); } }); }, 复制代码