H5画布不显示图片的问题解决

在onReady 执行

<template>
	<view class="">
		<canvas style="" canvas-id="myCanvas" id="myCanvas"></canvas>
		<!-- <view class="container">
			<img :src="tempFilePath" />
		</view> -->
	</view>

</template>

<script>
	var that
	export default {
		data() {
			return {
				tempFilePath: ''
			}
		},
		onReady(option) {
			that = this;
			const ctx = uni.createCanvasContext('myCanvas')
			// uni.chooseImage({
			//   success: function(res){
			    ctx.drawImage('../../static/sharePoster_bg.png', 0, 0, 150, 100)
			    ctx.draw()
			  // }
			// })
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
</style>

 

   

<template>
	<view class="">
		<canvas style="" canvas-id="myCanvas" id="myCanvas"></canvas>
		<view class="container">
			<image :src="tempFilePath" mode="widthFix"></image>
		</view>
	</view>

</template>

<script>
	var that
	export default {
		data() {
			return {
				tempFilePath: ''
			}
		},
		onReady(option) {
			that = this;
			const ctx = uni.createCanvasContext('myCanvas')

			ctx.drawImage('../../static/sharePoster_bg.png', 0, 0, 200, 380)
			ctx.fillStyle="#005B8C";
			ctx.font = "bold 60px Arial";
			// ctx.setFontStyle('color','#005B8C')
			ctx.fillText('A+', 15, 126)
			ctx.draw(true, () => {
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 200,
					height: 380,
					destWidth: getApp().windowWidth,
					destHeight: getApp().windowWidth/200*380,
					canvasId: 'myCanvas',
					fileType: "jpg",
					quality: 1,
					success(res) {
						console.log('绘制成功-------', res)
						uni.hideLoading();
						that.tempFilePath = res.tempFilePath;
					},
					fail(err) {
						console.log('绘制失败', err)
					}
				});
			});
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	canvas {
			background-color: #fff;
			border: 1px solid #d0d0d0;
			width: 100vw;
			height: 100vh;
			position: absolute;
			left: 100%;
		}
	 
		.container {
			width: 100vw;
			align-items: center;
			overflow: auto;
			background: #fefefe;
		}
	 
		.container image {
			width: 100%;
			position: absolute;
			top: 0;
		}
</style>