canvans转图片,不清晰且文字错位,这个是怎么回事,该怎么解决呢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo saveImgToPhotosAlbumTap(e) { //保存 var obj = e.currentTarget.dataset.obj; var that = this; var unit = that.data.screenWidth / 375 //2. canvas绘制文字和图片 const ctx = wx.createCanvasContext('share'); var bgImgPath = that.data.shareImgSrc; var head_pic = obj.cert_picture // that.setData({ // canvasHidden: false // }) //这里很重要,主要就是布局 ctx.drawImage(bgImgPath, 0, 0, that.data.screenWidth, 500); if (head_pic) { //宽度/100 1个百分比宽度多少 * 占的比例 let x = that.data.windowWidth / 100 * 44 //160 ctx.drawImage(head_pic, x, 203, 50, 80); } ctx.setFontSize(10) ctx.setFillStyle('#000') ctx.fillText(obj.student_name, that.data.windowWidth / 100 * 22.13, 427) //83/427 ctx.fillText(obj.student_position, that.data.windowWidth / 100 * 49.06, 427); //184 ctx.fillText(obj.park_name, that.data.windowWidth / 100 * 73.33, 427); //275 ctx.fillText(obj.train_name, that.data.windowWidth / 100 * 24, 450); //90 ctx.fillText(obj.score, that.data.windowWidth / 100 * 25.33, 474); //95 ctx.fillText(obj.number, that.data.windowWidth / 100 * 21.33, 495); //80 ctx.fillText(obj.created_at, that.data.windowWidth / 100 * 14.13, 535); //53 ctx.stroke() ctx.draw(false, function() { // 3. canvas画布转成图片 wx.canvasToTempFilePath({ x: 0, y: 0, width: that.data.screenWidth, height: that.data.windowHeight, destWidth: that.data.screenWidth, destHeight: that.data.windowHeight, canvasId: 'share', success: function(res) { that.setData({ shareImgSrc: res.tempFilePath }) if (!res.tempFilePath) { wx.showModal({ title: '提示', content: '图片绘制中,请稍后重试', showCancel: false }) } //将图片保存到相册 wx.saveImageToPhotosAlbum({ filePath: that.data.shareImgSrc, success(res) { wx.showModal({ title: '提示', content: '确定要保存这张图片吗?', showCancel: false, confirmText: '确定', success: function(res) { if (res.confirm) { console.log('用户点击确定'); } that.setData({ canvasHidden: true }) } }) } }) }, fail: function(res) { console.log(res) } }) }); },