问题描述

根据项目需求，将商品的图片，用户头像，二维码，商品信息绘制到分享海报中。

效果展示

在这里插入图片描述

参数介绍

参数 类型 说明
avatarImg String 头像图片
bgImg String 背景图片
qrImg String 二维码
goodsImg String 商品图片
iconImg String 平台icon
goodsTitle String 商品名称
realPrice String 真实价格
price String 价格
canvasH Number 画布高度
widthRatio Number 画布宽度比例

核心代码

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
setTimeout(() => {
						var ctx = uni.createCanvasContext('myCanvas', this);
						// 填充背景色，白色
 						ctx.beginPath();
						ctx.setFillStyle('#ffffff'); // 默认白色
						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)

						// 绘制商品主图，二维码 drawImage(图片路径, x, y, 绘制图像的宽度, 绘制图像的高度)
						ctx.drawImage(this.bgImgInfo.path, 0, 0, this.canvasW, this.canvasH);
						ctx.drawImage(this.goodsImgInfo.path, 20, 80, this.canvasW * .85, 220)
						ctx.drawImage(this.iconImgInfo.path, 20, 310, 15, 15);
						ctx.drawImage(this.avatarImgInfo.path, 24, 44, 30, 30);
						ctx.drawImage(this.qrImgInfo.path, this.canvasW - 98, 410, 75, 75);

						let avatar;
						if (this.headimgs.length > 6) {
							avatar = this.headimgs.splice(0, applyNum);
						} else {
							avatar = this.headimgs;
						}
						avatar.forEach((item, index) => {
							ctx.drawImage(item, 30 + index * 15, 370, 25, 25)
						})

						// 3、绘制商品标题
						let goodsName;
						if (this.goodsTitle.length > 11) {
							goodsName = this.goodsTitle.substr(0, 13) + "...";
						} else {
							goodsName = this.goodsTitle;
						}
						ctx.setFontSize(15); // setFontSize() 设置字体字号
						ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
						ctx.fillText(goodsName, 38, 323);

						// 4、真实价格
						ctx.beginPath()
						ctx.setFontSize(17) // 字号
						ctx.setFillStyle('#e31d1a') // 颜色
						ctx.fillText(this.realPrice, 40, 350); // （文字，x，y）

						// 5、原价价格
						ctx.setFontSize(15) // 字号
						ctx.setFillStyle('#aaaaaa') // 颜色
						ctx.fillText(this.price, 135, 350); // （文字，x，y）

						// 6、申请人数
						ctx.setFontSize(10)
						ctx.setFillStyle('#8799a3')
						ctx.fillText(1 + '万+人已购买', 150, 385);

						// 7、划线
						ctx.beginPath()
						ctx.setStrokeStyle('#e31d1a')
						ctx.setLineWidth(2)
						ctx.moveTo(135, 345)
						ctx.lineTo(188, 345)
						ctx.stroke()

						ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
							uni.showToast({
								icon: 'success',
								mask: true,
								title: '绘制完成',
							});
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								quality: 1,
								success: (res) => {
									this.postDataUrl = res.tempFilePath.replace(/[\r\n]/g,
										'');
										console.log(this.postDataUrl)
									// #ifdef APP-PLUS
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: (res) => {
											uni.hideLoading()
											uni.showToast({
												title: '生成海报成功'
											})
										},
										fail: (res) => {
											uni.hideLoading()
											uni.showToast({
												title: '生成海报失败'
											})
										}
									})
									//  #endif
								}
							})
						});
					}, 1500)

相关解析

uni.createCanvasContext(canvasId, this)

创建canvas绘图上下文。

参数 类型 说明
canvasId String 传入定义在 <canvas/> 的 canvas-id或id的唯一标识
this Object 组件实例 this ，不可省略

beginPath()

开始创建一个路径

setFillStyle(color)

设置填充色

fillRect(x, y, width, height)

设置填充一个矩形的位置和大小。

参数 类型 定义
x Number 矩形路径左上角的x坐标
y Number 矩形路径左上角的y坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

drawImage()

将图片绘制到画布上，有三个版本的写法：

  • drawImage(imageResource，dx, dy)
  • drawImage(imageResource，dx, dy, dWidth, dHeight)
  • drawImage(imageResource，sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
参数 类型 说明
imageResource String 所要绘制的图片资源
dx Number 图像的左上角在 X 轴的位置
dy Number 图像的左上角在 Y 轴的位置
dWidth Number 绘制图像的宽度
dHeight Number 绘制图像的高度
sx Number 源图像的矩形选择框的左上角 X 坐标
sy Number 源图像的矩形选择框的左上角 Y 坐标
sWidth Number 矩形选择框的高度
sHeight Number 矩形选择框的高度

setFontSize(size)

设置字体的大小

fillText(text, x, y, maxWidth)

在画布上绘制文本

参数 类型 说明
text String 文本
x Number 文本的左上角x坐标位置
y Number 文本的左上角y坐标位置
maxWidth Number 绘制的最大宽度(选填)

setStrokeStyle(color)

设置边框颜色，默认颜色为 black。

setLineWidth(width)

设置线条的宽度。

moveTo(x, y)

把路径移动到画布中的指定点

参数 类型 说明
x Number 位置的x坐标
y Number 位置的y坐标

lineTo(x, y)

增加一个新点，然后创建一条从上次指定点到目标点的线

参数 类型 说明
x Number 位置的x坐标
y Number 位置的y坐标

stroke()

画出当前路径的线条

stroke() 描绘的的路径是从 beginPath() 开始计算，将moveTo(x, y)，lineTo(x, y)等相关路径描绘画出来。

draw(reserve, callback)

将绘图上下文中的描述（路径、变形、样式）画到 <canvas />中。

参数 类型 说明
reserve Boolean 本次绘制是否接着上一次绘制默认 false
callback Function 绘制完成后回调