uni-app 小程序生成海报

最新推荐文章于 2024-08-02 09:32:08 发布

大根哥

最新推荐文章于 2024-08-02 09:32:08 发布

阅读量3.1k

点赞数 3

分类专栏：微信公众平台前端

本文链接：https://blog.csdn.net/a350110085/article/details/108613859

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

微信公众平台

2 篇文章 0 订阅

订阅专栏

效果图：

我用的是uni-app，直接在项目里创建一个vue文件代码放进去就可以了。

记得替换掉几处图片的地址：

有需要的可以封装成组件使用。

<template>
	<view>
		<canvas canvas-id="myCanvas" style="width: 690px;height:1040px; position: fixed;top: -10000px;"></canvas>
		<image @click="saveShareImg(canvasToTempFilePath)" style="width: 690upx; height: 1040upx;" :src="canvasToTempFilePath" mode=""></image>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.createCanvasImage();
	},
	data() {
		return {
			ratio: 1,
			ctx: null, // 创建canvas对象
			canvasToTempFilePath: null, // 保存最终生成的导出的图片地址
			openStatus: true // 声明一个全局变量判断是否授权保存到相册
		};
	},
	methods: {
		// 生成海报
		async createCanvasImage() {
			let self = this;
			// 点击生成海报数据埋点
			if (!self.ctx) {
				let codeUrl = 'https://api.jiapeijia.com/wxcode/20200914/c4ca4238a0b923820dcc509a6f75849b.png';
				let coverUrl = 'https://api.jiapeijia.com/static/cover.jpg';
				let headUrl = 'https://api.jiapeijia.com/uploads/1.png';
				wx.showLoading({
					title: '生成中...'
				});
				let code = new Promise(function(resolve) {
					wx.getImageInfo({
						src: codeUrl,
						success: function(res) {
							resolve(res.path);
						},
						fail: function(err) {
							console.log(err);
							wx.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});
				
				let cover = new Promise(function(resolve) {
					wx.getImageInfo({
						src: coverUrl,
						success: function(res) {
							resolve(res.path);
						},
						fail: function(err) {
							console.log(err);
							wx.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});

				// 头像
				let headImg = new Promise(function(resolve) {
					wx.getImageInfo({
						src: headUrl,
						success: function(res) {
							resolve(res.path);
						},
						fail: function(err) {
							console.log(err);
							wx.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});

				Promise.all([headImg, code,cover]).then(function(result) {
					const ctx = wx.createCanvasContext('myCanvas');
					console.log(ctx, self.ratio, 'ctx');
					let canvasWidthPx = 690 * self.ratio,
						canvasHeightPx = 1040 * self.ratio,
						
						avatarurl_width = 110, //绘制的头像宽度
						avatarurl_heigth = 110, //绘制的头像高度
						avatarurl_x = 95, //绘制的头像在画布上的位置
						avatarurl_y = 35, //绘制的头像在画布上的位置
						
						codeurl_width = 180, //绘制的二维码宽度
						codeurl_heigth = 180, //绘制的二维码高度
						codeurl_x = 70, //绘制的二维码在画布上的位置
						codeurl_y = 800, //绘制的二维码在画布上的位置
						
						coverurl_width = 610, //绘制的封面宽度
						coverurl_heigth = 350, //绘制的封面高度
						coverurl_x = 40, //绘制的封面在画布上的位置
						coverurl_y = 190; //绘制的封面在画布上的位置
						
					ctx.drawImage('/static/bg.jpg', 0, 0, 690, 1040); // 背景图片需要本地
					
					// 白底
					ctx.setFillStyle('#ffffff')
					ctx.fillRect(25, 175, 640, 840)
					
					ctx.save(); // 先保存状态 已便于画完圆再用
					ctx.beginPath(); //开始绘制
					//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
					ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
					ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
					ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

					ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
					
					ctx.font = 'normal bold 45px sans-serif';
					ctx.setFillStyle('#ffffff'); // 文字颜色
					ctx.fillText('微信昵称', 240, 85); // 绘制文字

					ctx.setFillStyle('#ffffff'); // 文字颜色
					ctx.setFontSize(30); // 文字字号
					ctx.fillText('推荐您来捷通驾校', 240, 130); // 绘制文字

					ctx.font = 'normal bold 40px sans-serif';
					ctx.setFillStyle('#222222');
					ctx.fillText('上捷通驾校', 40, 600);

					ctx.font = 'normal normal 26px sans-serif';
					ctx.setFillStyle('#666666'); // 文字颜色
					ctx.fillText('上海市松江区小昆山镇平原街398号5号楼', 40, 640); // 绘制文字
					
					// 白底
					ctx.setFillStyle('#CBE6FE')
					ctx.fillRect(40, 670, 125, 40)

					ctx.font = 'normal normal 24px sans-serif';
					ctx.setFillStyle('#1F8DFE'); // 文字颜色
					ctx.fillText('自有考场', 55, 700); // 绘制文字
					
					// 白底
					ctx.setFillStyle('#FDE5D2')
					ctx.fillRect(180, 670, 125, 40)
					
					ctx.setFillStyle('#F37F26'); // 文字颜色
					ctx.fillText('收费透明', 195, 700); // 绘制文字
					
					// 白底
					ctx.setFillStyle('#D2F1EF')
					ctx.fillRect(320, 670, 125, 40)
					
					ctx.setFillStyle('#2EBBB4'); // 文字颜色
					ctx.fillText('有接送', 335, 700); // 绘制文字
					

					ctx.beginPath();
					// 设置线宽
					ctx.lineWidth = 1;
					// 设置间距（参数为无限数组，虚线的样式会随数组循环）
					ctx.setLineDash([10, 10]);
					// 移动画笔至坐标 x20 y20 的位置
					ctx.moveTo(30, 760);
					// 绘制到坐标 x20 y100 的位置
					ctx.lineTo(660, 760);
					// 填充颜色
					ctx.strokeStyle="#aaaaaa";
					// 开始填充
					ctx.stroke();
					ctx.closePath();
					
					ctx.font = 'normal normal 36px sans-serif';
					ctx.setFillStyle('#E65449'); // 文字颜色
					ctx.fillText('长按识别', 300, 870); // 绘制孩子百分比
					
					ctx.font = 'normal normal 36px sans-serif';
					ctx.setFillStyle('#222222'); // 文字颜色
					ctx.fillText('小程序码', 444, 870); // 绘制孩子百分比
					
					ctx.font = 'normal normal 36px sans-serif';
					ctx.setFillStyle('#222222'); // 文字颜色
					ctx.fillText('查看驾校详细信息', 300, 920); // 绘制孩子百分比
					
					ctx.drawImage(result[2], coverurl_x, coverurl_y, coverurl_width, coverurl_heigth); // 绘制封面
					ctx.drawImage(result[1], codeurl_x, codeurl_y, codeurl_width, codeurl_heigth); // 绘制头像
					ctx.draw(false, function() {
						// canvas画布转成图片并返回图片地址
						wx.canvasToTempFilePath({
							canvasId: 'myCanvas',
							success: function(res) {
								self.canvasToTempFilePath = res.tempFilePath;
								self.showShareImg = true;
								console.log(res.tempFilePath, 'canvasToTempFilePath');
								wx.showToast({
									title: '绘制成功'
								});
							},
							fail: function() {
								wx.showToast({
									title: '绘制失败'
								});
							},
							complete: function() {
								wx.hideLoading();
								wx.hideToast();
							}
						});
					});
				});
			}
		},

		// 保存到系统相册
		saveShareImg: function(canvasToTempFilePath) {
			let self = this;
			// 数据埋点点击保存海报
			self.saveId = '保存学情海报';
			// 获取用户是否开启用户授权相册
			if (!self.openStatus) {
				wx.openSetting({
					success: result => {
						if (result) {
							if (result.authSetting['scope.writePhotosAlbum'] === true) {
								self.openStatus = true;
								wx.saveImageToPhotosAlbum({
									filePath: canvasToTempFilePath,
									success() {
										self.showShareImg = false;
										wx.showToast({
											title: '图片保存成功，快去分享到朋友圈吧~',
											icon: 'none',
											duration: 2000
										});
									},
									fail() {
										wx.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			} else {
				wx.getSetting({
					success(res) {
						// 如果没有则获取授权
						if (!res.authSetting['scope.writePhotosAlbum']) {
							wx.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									self.openStatus = true;
									wx.saveImageToPhotosAlbum({
										filePath: canvasToTempFilePath,
										success() {
											self.showShareImg = false;
											wx.showToast({
												title: '图片保存成功，快去分享到朋友圈吧~',
												icon: 'none',
												duration: 2000
											});
										},
										fail() {
											wx.showToast({
												title: '保存失败',
												icon: 'none'
											});
										}
									});
								},
								fail() {
									// 如果用户拒绝过或没有授权，则再次打开授权窗口
									self.openStatus = false;
									console.log('请设置允许访问相册');
									wx.showToast({
										title: '请设置允许访问相册',
										icon: 'none'
									});
								}
							});
						} else {
							// 有则直接保存
							self.openStatus = true;
							wx.saveImageToPhotosAlbum({
								filePath: canvasToTempFilePath,
								success() {
									self.showShareImg = false;
									wx.showToast({
										title: '图片保存成功，快去分享到朋友圈吧~',
										icon: 'none',
										duration: 2000
									});
								},
								fail() {
									wx.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			}
		}
	}
};
</script>

<style></style>

里面有用到虚线绘制：

context.beginPath();
// 设置线宽
context.lineWidth = 4;
// 设置间距（参数为无限数组，虚线的样式会随数组循环）
context.setLineDash([8, 8]);
// 移动画笔至坐标 x20 y20 的位置
context.moveTo(20, 20);
// 绘制到坐标 x20 y100 的位置
context.lineTo(20, 100);
// 绘制到坐标 x70, y100 的位置
context.lineTo(70, 100);
// 填充颜色
context.strokeStyle="red";
// 开始填充
context.stroke();
context.closePath();


// 切换回实线
context.setLineDash([]);

大根哥

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
uni-app 小程序生成海报

效果图：我用的是uni-app，直接在项目里创建一个vue文件代码放进去就可以了。记得替换掉几处图片的地址：有需要的可以封装成组件使用。<template> <view> <canvas canvas-id="myCanvas" style="width: 690px;height:1040px; position: fixed;top: -10000px;"></canvas> <image @click="..
复制链接

扫一扫

专栏目录