canvans转图片,不清晰且文字错位,这个是怎么回事,该怎么解决呢
发布于 6 年前 作者 iliu 5901 次浏览 来自 问答
  • 当前 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)

}

})

});

},

1 回复

有无出问题的示例图片和 canvas 截图效果?

回到顶部