uniapp中使用canvas画海报保存本地分享朋友圈

uniapp海报可以分享到微信，朋友圈，保存本地

业务需求现在需要一张海报分享出去，本来想的是找一个插件去修改一下，但是一看没有合适的，于是就借鉴着别人的代码写了一个

HTML

<template>
		<view class="poster">
			<canvas :style="style" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		</view>
</template>

js

JS中也是封装了几个简单的方法

圆角矩形

//ctx canvas对象 strokeStyle边框颜色 fillStyle填充颜色 
// x距离左侧距离 y距离右侧距离 width宽 height高 radius圆角
drawRoundedRect(ctx, strokeStyle, fillStyle, x, y, width, height, radius) {
				ctx.beginPath();
				this.roundedRect(ctx, x, y, width, height, radius);
				ctx.strokeStyle = strokeStyle;
				ctx.fillStyle = fillStyle;
				ctx.stroke();
				ctx.fill();
			},

文字

//ctx canvas对象 size字体大小 text内容 color颜色 x距离左侧距离 y距离右侧距离 font字体样式
writeWord(ctx, size, text, color, x, y, font) {
				ctx.setFontSize(size);
				if (font) {
					ctx.font = font // 加粗等功能
				}
				ctx.setFillStyle(color);
				ctx.fillText(text, x, y);
			},

圆形图片

// ww 是屏幕宽度 wh是高度，这里我是根据业务来做个一些简单的适配，没多少东西就手算了一下，这个方法我就用到一个头像也就没封装
				ctx.save()
				ctx.beginPath()
				ctx.arc(ww * 0.12, wh * 0.81, ww * 0.064, 0, 2 * Math.PI)；
				//上边参数分别是距离左侧距离 距离右侧距离 大小 
				ctx.setStrokeStyle('#AAAAAA')
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(
					'图片地址',
					ww * 0.0544, wh * 0.7795, ww * 0.128, ww * 0.128);
					//上边参数分别是距离左侧距离 距离右侧距离 大小 
				ctx.restore();

画图

这里就贴出少部分代码，方法有了，剩下的就根据业务来了

			draw(ww, wh) {
				var ctx = uni.createCanvasContext('firstCanvas');
				// 调用
				//全屏背景
				this.drawRoundedRect(ctx, '#2a67f7', '#2a67f7', 0, 0, ww, wh, 12);
				//单个圆角矩形
				this.drawRoundedRect(ctx, '#ffffff', '#ffffff', ww * 0.053, wh * 0.112, ww * 0.893, wh * 0.63, 12);
				let a = 'nomarl bold ' + ww * 0.0586 + 'px Arial,sans-serif';
				this.writeWord(ctx, ww * 0.0586, this.info.title, "#333333", ww * 0.093, wh * 0.165, a);
				ctx.save()
				ctx.beginPath()
				ctx.arc(ww * 0.12, wh * 0.81, ww * 0.064, 0, 2 * Math.PI)
				// 如果小伙伴儿调试时候感觉圆形和图片有点错位，可以开启下面两行注释代码，给圆圈加个边框
				ctx.setStrokeStyle('#AAAAAA')
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(
					this.config.domain.img + this.userInfo.IconUrl,
					ww * 0.0544, wh * 0.7795, ww * 0.128, ww * 0.128);
				ctx.restore();
				let timer = setTimeout(() => {
					clearTimeout(timer);
					ctx.draw();
				}, 300)
			}

初始化调用

created() {
     业务代码比较少，所以手写适配宽高
			uni.getSystemInfo({
				success: res => {
					this.style = 'width:' + res.windowWidth * 0.75 + 'px; height: ' + 	res.windowWidth * 0.75 *
						2 + 'px;margin: 0 auto;margin-top:'+ res.windowHeight*0.1002 +'px;'
					this.draw(res.windowWidth * 0.75, res.windowWidth * 0.75 * 2);
				}
			});
		}

下载图片

savePoster() {
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: (response) => {
						console.log(response);
						this.imgUrl = response.tempFilePath
					},
					fail: (response) => {
						console.log(response);
					}
				}, this);
			},

分享到微信

uni.share({
			provider: 'weixin',
			scene: 'WXSceneSession',
			type: 2,
			imageUrl: this.imgUrl,
			success: function(res) {
				console.log('success:' + JSON.stringify(res));
			},
			fail: function(err) {
				console.log('fail:' + JSON.stringify(err));
			}
		});

分享到朋友圈

uni.share({
			provider: 'weixin',
			scene: 'WXSceneTimeline',
			type: 2,
			imageUrl: this.imgUrl,
			success: function(res) {
				console.log('success:' + JSON.stringify(res));
			},
			fail: function(err) {
				console.log('fail:' + JSON.stringify(err));
			}
		});

保存本地

uni.saveImageToPhotosAlbum({
							filePath: this.imgUrl,
							success: (response) => {
								console.log(response);
								uni.showToast({
									title: '保存相册成功'
								});
							},
							fail: (response) => {
								uni.openSetting({
									success: (response) => {
										if (!response.authSetting[
												'scope.writePhotosAlbum'
											]) {
											uni.showModal({
												title: '提示',
												content: '获取权限成功，再次点击图片即可保存',
												showCancel: false
											})
										} else {
											uni.showModal({
												title: '提示',
												content: '获取权限失败，无法保存',
												showCancel: false
											})
										}
									}
								})
							}
						})

至此就完成了一个海报了，如果对你有用的话你就借鉴一下，有不同意见的也可以留言反馈，感谢观看