欢迎访问优讯网!
您当前的位置:首页 > 爱编程

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

时间:2020-03-10 10:15:36  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要为大家详细介绍了微信小程序用canvas画图,并实现分享功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

如下图的列表:

分享出来的样子:

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

上代码:

【html部分】

1
2
<canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCanvas'></canvas>
<button open-type='share'>分享</button>

【js部分】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
var ctx = "" // 用于获取canvas
var leftMargin = "" //文字距离左边边距
var topMargin = "" //文字距离右边边距
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 title: '人人车司机',
 salary: '500-8000元/月',
 rtype: '日结',
 rmoney: '20元',
 canvasWidth: '', // canvas宽度
 canvasHeight: '', // canvas高度
 imagePath: '' // 分享的图片路径
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this
 var sysInfo = 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 () {
 var context = wx.createContext();
 var that = this;
 var path = "/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 (){
 var str = this.data.title
 ctx.font = 'normal bold 20px sans-serif';
 ctx.setTextAlign('center'); // 文字居中
 ctx.setFillStyle("#222222");
 ctx.fillText(str, this.data.canvasWidth/2,65)
 },
 // 画返费方式
 addRtype: function () {
 var str = this.data.rtype
 ctx.setFontSize(16)
 ctx.setFillStyle("#ff4200");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4)
 },
 // 画返费金额
 addRmoney: function () {
 var str = this.data.rmoney
 ctx.setFontSize(16)
 ctx.setFillStyle("#222");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5)
 },
 // 画薪资
 addSalary: function () {
 var str = this.data.salary
 ctx.setFontSize(16)
 ctx.setFillStyle("#222");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61)
 },
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function (res) {
 // return eventHandler接收到的分享参数
 return {
  title: this.data.title,
  path: '/pages/test/test',
  imageUrl: this.data.imagePath
 };
 },
 //导出图片
 tempFilePath: function(){
 let that = this;
 wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function success(res) {
  wx.saveFile({
   tempFilePath: res.tempFilePath,
   success: function success(res) {
   that.setData({
    imagePath: res.savedFilePath
   });
   }
  });
  }
 });
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 }
 
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/182288.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门