微信小程序用canvas画图并分享

2023-07-29 14:10:03 187

最近开始做微信小程序，有这样一个需求：

从列表页进入详情，在每一个详情页面去分享，分享出来的图片是带有当前详情数据的图片

如下图的列表：

分享出来的样子：

解决方案和思路：canvas画图生成图片

上代码：

【html部分】


分享

【js部分】

varctx=""//用于获取canvas
varleftMargin=""//文字距离左边边距
vartopMargin=""//文字距离右边边距
Page({

/**
*页面的初始数据
*/
data:{
title:'人人车司机',
salary:'500-8000元/月',
rtype:'日结',
rmoney:'20元',
canvasWidth:'',//canvas宽度
canvasHeight:'',//canvas高度
imagePath:''//分享的图片路径
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
varthat=this
varsysInfo=wx.getSystemInfo({
success:function(res){
that.setData({
//设置宽高为屏幕宽，高为屏幕高的80%，因为文档比例为5:4
canvasWidth:res.windowWidth,
canvasHeight:res.windowWidth*0.8
})
leftMargin=res.windowWidth
topMargin=res.windowWidth*0.8
},
})
},

/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){
ctx=wx.createCanvasContext('myCanvas')
this.addImage()
this.tempFilePath()

},
//画背景图
addImage:function(){
varcontext=wx.createContext();
varthat=this;
varpath="/images/share.jpg";
//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
//不知道是什么原因，手机环境能正常显示
ctx.drawImage(path,0,0,this.data.canvasWidth,this.data.canvasHeight);
this.addTitle()
this.addRtype()
this.addRmoney()
this.addSalary()
ctx.draw()
},
//画标题
addTitle:function(){
varstr=this.data.title
ctx.font='normalbold20pxsans-serif';
ctx.setTextAlign('center');//文字居中
ctx.setFillStyle("#222222");
ctx.fillText(str,this.data.canvasWidth/2,65)
},
//画返费方式
addRtype:function(){
varstr=this.data.rtype
ctx.setFontSize(16)
ctx.setFillStyle("#ff4200");
ctx.setTextAlign('left');
ctx.fillText(str,leftMargin*0.35,topMargin*0.4)
},
//画返费金额
addRmoney:function(){
varstr=this.data.rmoney
ctx.setFontSize(16)
ctx.setFillStyle("#222");
ctx.setTextAlign('left');
ctx.fillText(str,leftMargin*0.35,topMargin*0.5)
},
//画薪资
addSalary:function(){
varstr=this.data.salary
ctx.setFontSize(16)
ctx.setFillStyle("#222");
ctx.setTextAlign('left');
ctx.fillText(str,leftMargin*0.35,topMargin*0.61)
},
/**
*用户点击右上角分享
*/
onShareAppMessage:function(res){
//returneventHandler接收到的分享参数
return{
title:this.data.title,
path:'/pages/test/test',
imageUrl:this.data.imagePath
};
},
//导出图片
tempFilePath:function(){
letthat=this;
wx.canvasToTempFilePath({
canvasId:'myCanvas',
success:functionsuccess(res){
wx.saveFile({
tempFilePath:res.tempFilePath,
success:functionsuccess(res){
that.setData({
imagePath:res.savedFilePath
});
}
});
}
});
},

/**
*生命周期函数--监听页面显示
*/
onShow:function(){

},

/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){

},

/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){

},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

}


})

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序用canvas画图并分享

热门推荐

随机推荐