uniapp canvas 合成头像

 利用canvas先后绘制两张图片进行堆叠达到合成目的

<template>
	<view class="content">
		<canvas style=" width: 750rpx; height: 500rpx" canvas-id="myApp" id="myApp"> </canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				cavasCtx:null
			}
		},
		onLoad() {
			setTimeout(()=>{
				this.initCavas()
			},2000)
		},
		methods: {
			initCavas(){
				this.cavasCtx = uni.createCanvasContext('myApp',this)
				console.log(123);
				this.drapBg()
			},
			drapBg(){
				let _this = this
				uni.downloadFile({
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F02%2F20200502102421_rxcyk.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661067122&t=de3516320905a4f5ce6a8843aa6c7eae',
					success: function (res) {
						_this.cavasCtx.save()
						_this.cavasCtx.beginPath()
						_this.cavasCtx.arc(100, 100, 100, 0, 2 * Math.PI)
						_this.cavasCtx.clip()
						_this.cavasCtx.drawImage(res.tempFilePath,0,0, 200, 200)
						_this.drapImg()
					}
				})
			},
			drapImg(){
				let _this = this
				uni.getImageInfo({
					src:'/static/bg.png',
					complete: (res) => {
						_this.cavasCtx.drawImage(res.path, 0,0,200, 200)
						_this.cavasCtx.draw()
						setTimeout(()=>{
							_this.putOut()
						},100)
					}
				})
			},
			putOut(){
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width: 200,
				  height: 200,
				  canvasId: 'myApp',
				  success: function(res) {
				    console.log(res.tempFilePath)
					//下载完成后的东西
				  } 
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>