微信小程序合成五星红旗头像简单demo

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

马上就到十一国庆节了，朋友圈开始各种合成五星红旗头像，找了几个小程序合成，感觉很麻烦，干脆自己写一个。

---

体验一下：

准备工作

1.素材文件

2.合成目标图片：

代码部分

<template>
	<view class="content">
		<view class="v_block">
			<canvas canvas-id="canvas"></canvas>
		</view>
		<view class="v_block">
			<button @chooseavatar="onChooseAvatar" open-type="chooseAvatar" > 上传头像 </button>
			<button @click="downloadImg()"> 下载图片 </button>
			<button @click="upImg()"> 上传图片 </button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				avatarUrl: 'https://gitee.com/long-fei-smile/free/raw/master/images/applet/11.jpg',
				hqUrl: 'https://gitee.com/long-fei-smile/free/raw/master/images/applet/hq3.png',
				chinese_heart: 'https://gitee.com/long-fei-smile/free/raw/master/images/applet/chinese_heart.png',
				avatarUrlPath: '',
				hqUrlPath: '',
				chineseHeartPath: ''
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中', // 加载框上显示的文本内容  
			})
			var ctx = uni.createCanvasContext("canvas",this);
			var self = this;  
			uni.getImageInfo({
				src: self.avatarUrl,
				success:function(img){
					self.avatarUrlPath = img.path
					console.log(img.path,'img.path')
					ctx.drawImage(img.path,0,0,400,400)
					uni.getImageInfo({
						src: self.hqUrl,
							success:function(hq){
								self.hqUrlPath = hq.path
								ctx.drawImage(hq.path,0,0,400,400)
								uni.getImageInfo({
									src: self.chinese_heart,
									success:function(c_heart){
										self.chineseHeartPath = c_heart.path
										ctx.drawImage(c_heart.path,160,239,150,100)
										ctx.draw()
										uni.hideLoading();
									},
									fail:function(e){
										console.error("中国心图片加载失败！")
										uni.hideLoading();
									}
								})
							},
						fail:function(e){
							console.error("红旗图片加载失败！")
							uni.hideLoading();
						}
					})
					
				},
				fail:function(e){
					console.error("女生图片加载失败！")
					uni.hideLoading();
				}
			});
			ctx.draw() 
			//ctx.drawImage("/static/hq3.png",0,0,400,400)
			
		},
		methods: {
			/* 上传图片方法 */
			upImg(){
				const s = wx.getSystemInfoSync().theme;
				
				console.log(s,"222222222222222")
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						console.log("-------------");
						var ctx = uni.createCanvasContext("canvas",this);
						ctx.drawImage(res.tempFilePaths[0],0,0,400,400)
						ctx.drawImage("/static/hq3.png",0,0,400,400)
						ctx.drawImage("/static/chinese_heart.png",160,239,150,100)
						ctx.draw()
					}
				});
			},
			downloadImg(){
				uni.canvasToTempFilePath({
				  canvasId: 'canvas',
				  success: function(res) {
				    // 在H5平台下，tempFilePath 为 base64
				    uni.saveImageToPhotosAlbum({
				    	filePath: res.tempFilePath,
						success() {
							uni.showModal({
								title: '恭喜您',  
								content: '图片已经下载至相册！',  
								success: function (res) {  
								    if (res.confirm) {  
								        // 用户点击确定  
								    } else if (res.cancel) {  
								       // 用户点击取消  
								    }  
								}  
							})
						}
				    })
				  } 
				})
			},
			onChooseAvatar(e) {
			    this.avatarUrl = e.detail.avatarUrl 
				console.log(this.avatarUrl,'avatarurl')
				const ctx = uni.createCanvasContext("canvas",this);
				ctx.drawImage(this.avatarUrl,0,0,400,400)
				ctx.drawImage(this.hqUrlPath,0,0,400,400)
				ctx.drawImage(this.chineseHeartPath,166,296,166,80)
				ctx.draw()
			}
		}
	}
</script>

<style lang="scss">
	.content{
		
		.imgs_class{
			height: 400rpx;
			width: 400rpx;
			border-radius: 30rpx;
		}
		canvas{
			height: 800rpx;
			width: 800rpx;
		}
		.v_block{
			display: flex;
			margin-top: 39rpx;
			align-items: center;
		}
	}
</style>

---

线上版本

欢迎大家查看线上版本：

总结

当前版本线上可能无法下载图片，新版本正在发布。
代码部分本地运行没有问题，发布后有授权问题，正在优化中。后续持续发布。