- 当前 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)
}
})
});
},
微信小程序开发问题解答
微信小程序开发者回答:
有无出问题的示例图片和 canvas 截图效果?
本文网址:http://www.91bianli.com/weixinxiaochengxu/39346.html