小程序实现canvas绘制图片和文字并保存到手机

 HTML

<template>
	<view>
		<canvas canvas-id="myCanvas" :style="{height:'380px',width:wWidth+'px',background:'#FFFFFF'}"></canvas>
		<view class="textCenter">
			<button @click="saveCanvas">保存图片</button>
		</view>
	</view>
</template>

JS

<script>
	export default {
		data() {
			return {
				wHeight:'',
				wWidth:''
			}
		},
		onLoad(){
			this.wHeight=uni.getWindowInfo().screenHeight-50; //屏幕可视区域高度
			this.wWidth=uni.getWindowInfo().screenWidth;//屏幕可视区域宽
			// 获取Canvas对象 
			var context = wx.createCanvasContext('myCanvas') 
            //设置背景颜色是白色，这个地方就是设置一个与canvas画布一样大小的方框设置方框背景
			context.setFillStyle('#FFFFFF')
			context.fillRect(0,0,this.wWidth,380);
			context.stroke()

			// 绘制文本			
			context.setFontSize(20)			
			context.setFillStyle('red')
			context.setTextAlign('center')
			context.fillText('Hello World!',  this.wWidth/2, 50) 
			
			context.setFontSize(20)
			
			context.setFillStyle('red')
			context.setTextAlign('center')
			
			context.fillText('葫芦娃', this.wWidth/2, 100)
			context.stroke() 
			let _this=this;
			// 绘制图片
			wx.getImageInfo({
				src: 'https://yujia-shanghai-bucket.oss-cn-shanghai.aliyuncs.com/h5/out_program/1687242451873_634a7025d03364b415b90bf5a07306071827dbc97358-C6odDl_fw1200.webp.jpg',
				success(res) { 
					context.drawImage(res.path, _this.wWidth/2-100, 140, 200, 200) 
					context.stroke() 
					// 将Canvas绘制出来 
					context.draw()
				}			
			}) 
		},
		methods: {
			saveCanvas(){
				wx.canvasToTempFilePath({  
					x: 0,  
					y: 0,  
					width: this.wWidth, 
					height: 380,  
					canvasId: 'myCanvas',  
					fileType:'jpg',
					success: function (res) {  
						console.log(res.tempFilePath);  
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
						    success: (resS) => {    
							    console.log(resS)  
							    uni.showToast({
								    title:'保存成功',
								    icon:'success'
							    })
						    },  
						    fail: (errS) => {
							
						    }}) 
					    },fail: (err) => {
						    console.log(err);
					    }  
				    }) 
				    return;
				
			    }
		    }
	    }
</script>