话不多说直接上代码，备注的地方改动就可直接使用
index.wxml
//加上以下css分享卡片会隐藏到页面之外
<view style='0px;height:0px;overflow:hidden;position:fixed;bottom:-1000px;'>
<canvas style='{{canvasWidth}}px;height:{{canvasHeight}}px;' canvas-id='myrank'></canvas>
</view>
index.js
//绘制图片需要的变量
data: {
//分享好友
titles:'',
canvasWidth: '', // canvas宽度
canvasHeight: '', // canvas高度
imagePath: '', // 分享的图片路径
kilometre:'',//公里
calorie:'',//卡路里
minute:'',//分钟
},
onLoad: function (options) {
// 分享好友获取宽高
var sysInfo = wx.getSystemInfo({
success: function (res) {
console.log(res,11111)
that.setData({
//设置宽高为屏幕宽，高为屏幕高的80%，因为文档比例为5:4
canvasWidth: res.windowWidth,
canvasHeight: res.windowWidth * 0.8
})
leftMargin = res.windowWidth
topMargin = res.windowWidth * 0.8
},
})
},
//掉接口的时候就调用绘图方法，让图片提前绘制 ，好处是分享时不会有空白页（此处是样例，根据自己实际项目调用接口使用）
getData(){
const parms = {
ordersidx:this.data.ordersidx,
ranking:this.data.ranking,
userid:this.data.memberid
}
http.selectPageRanking(parms).then(res=>{
console.log(res,1111)
if(res.code == 200){
//绘制canvas调用方法（粘贴此处即可）
ctx = wx.createCanvasContext('myrank')
this.addImage()
setTimeout(() => {
this.tempFilePath()
}, 100);
}
})
},
//绘制图片的方法和步骤
onReady: function () {
let memberid = wx.getStorageSync('memberid')
this.setData({
memberid:memberid
})
if(this.data.memberid){
this.getData(); //调用接口方法
}
},
//画背景图
addImage: function () {
var context = wx.createContext();
var that = this;
// var path = "/pages/img/share_ranking.png";
var path = that.data.cardBackimg; //背景图自己找本地合适的图片
//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
//不知道是什么原因，手机环境能正常显示
ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
that.addname()
that.addtime()
that.addRanking()
that.addexplain()
ctx.draw()
},
// 画名字
addname: function() {
var str = this.data.names
ctx.font = 'normal bold 20px sans-serif';
ctx.setTextAlign('left'); // 文字居中
ctx.setFillStyle("#FD7722");
ctx.setFontSize(14)
ctx.fillText(str, 86,110)
},
//画时间
addtime: function(){
var str = this.data.times != null ? this.data.times.split(' ')[0] : ''
ctx.font = 'normal bold 10px sans-serif';
ctx.setTextAlign('left'); // 文字居中
ctx.setFillStyle("#FD7722");
ctx.setFontSize(14)
ctx.fillText(str, 86,134)
},
//画名次
addRanking: function(){
var str = this.data.ranks
ctx.font = 'normal bold 60px sans-serif';
ctx.setTextAlign('left'); // 文字居中
ctx.setFillStyle("#FD7722");
ctx.setFontSize(80)
ctx.fillText(str, 106,224)
},
//排名
addexplain: function(){
var str = this.data.explain
ctx.font = 'normal bold 60px sans-serif';
ctx.setTextAlign('left'); // 文字居中
ctx.setFillStyle("#FD7722");
ctx.setFontSize(28)
ctx.fillText(str, 76,264)
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
this.addImage()
this.tempFilePath()
wx.showShareMenu({
withShareTicket: false
})
return {
title: this.data.titles, //自定义分享卡片标题
path: '/pages/shareList/shareRank/index //点击分享卡片跳回小程序的页面路径
imageUrl: this.data.imagePath,
success:function(res){
console.log(res,1111)
}
};
},
//导出图片
tempFilePath: function(){
let that = this;
wx.canvasToTempFilePath({
canvasId: 'myrank',
success: function success(res){
wx.saveFile({
tempFilePath: res.tempFilePath,
success: function success(res){
that.setData({
imagePath: res.savedFilePath
});
}
});
},
});
},