- 预期表现
- 复现路径
// **分享到朋友圈
sharefriend: function (){
var that = this;
wx.getSystemInfo({
success:res =>{
console.log('小程序信息', parseFloat(res.version));
if (parseFloat(res.version) < 6.6){
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
return false;
}else{
that.setData({
share2: true,
share: false
});
wx.showLoading({
title: '正在生成图片...',
mask: true,
});
}
}
});
// 小程序获取图片信息API
wx.getImageInfo({
src: that.data.ctxUrl,
success: function (res) {
console.log(res);
that.setData({
ctxUrl: res.path
})
},
fail(err) {
console.log(err)
}
})
setTimeout(()=>{
var canvasCtx = wx.createCanvasContext('myCanvas');
canvasCtx.clearRect(0, 0, 0, 0);
//绘制背景
canvasCtx.drawImage('../../img/write.png', 0, 0, that.data.windowWidth * 0.8, that.data.windowHeight * 0.8);
//绘制名称
canvasCtx.setFontSize(18);
canvasCtx.setTextAlign('center');
canvasCtx.fillText(that.data.ctxName, that.data.windowWidth * 0.8 / 2, 120);
// 绘制信息
canvasCtx.setFontSize(18);
canvasCtx.setTextAlign('center');
canvasCtx.fillText(that.data.ctxRank, that.data.windowWidth * 0.8 / 6, 180);
canvasCtx.fillText(that.data.ctxNum, that.data.windowWidth * 0.8 / 2, 180);
canvasCtx.fillText(that.data.ctxPoints, (that.data.windowWidth * 4) / 6, 180);
// 绘制信息2
canvasCtx.setFontSize(13);
canvasCtx.setTextAlign('center');
canvasCtx.fillText('当前排名', that.data.windowWidth * 0.8 / 6, 200);
canvasCtx.fillText('得分', that.data.windowWidth * 0.8 / 2, 200);
canvasCtx.fillText('净胜分', (that.data.windowWidth * 4) / 6, 200);
// 绘制分割线
canvasCtx.drawImage('../../img/line.png', 0, 240, that.data.windowWidth * 0.8, 15);
// 比赛项目:羽神等你来战!丰厚礼品等着你
canvasCtx.setFontSize(12);
canvasCtx.setTextAlign('center');
canvasCtx.fillText('比赛项目:羽神等你来战!丰厚礼品等着你', that.data.windowWidth * 0.8 / 2.1, 285);
// 绘制二维码
canvasCtx.drawImage('../../img/code.jpg', (that.data.windowWidth * 0.8 / 2) - 50, that.data.windowHeight * 0.585, 100, 100);
//绘制头像
canvasCtx.save();
canvasCtx.beginPath(); //开始绘制
canvasCtx.arc(that.data.windowWidth * 0.8 / 2, 58, 38, 0, 2 * Math.PI, false);
canvasCtx.clip();
canvasCtx.drawImage(that.data.ctxUrl, that.data.windowWidth * 0.8 / 2 - 38, 20, 76, 76);
canvasCtx.restore();
canvasCtx.draw();
wx.hideLoading();
}, 1000)
},
// 保存绘制的图片
savePic: function () {
var that = this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.windowWidth,
height: that.data.windowHeight,
destWidth: that.data.windowWidth,
destHeight: that.data.windowHeight,
canvasId: 'myCanvas',
success: function (res) {
if (!res.tempFilePath) {
wx.showModal({
title: '提示',
content: '图片绘制中,请稍后重试',
showCancel: false
})
}
util.savePicToAlbum(that,res.tempFilePath);
}
})
},
// 关闭绘制
closeShare:function(){
this.setData({
share: true,
share2: false
})
}
建议你试下:https://github.com/Kujiale-Mobile/Painter
建议把临时图片路径放在img中去导出
打开手机调试试试看?
提供一下能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
wechatide://minicode/W8OuH0m57I3zwechatide://minicode/W8OuH0m57I3z
,乱码了。麻烦重新提供一下
wechatide://minicode/01PSE0mi7F3C