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

逃离我推掉我的手 2022-11-03 04:09 3阅读 0赞

在onReady 执行

<template>
    	<view class="">
    		<canvas style="" canvas-id="myCanvas" id="myCanvas"></canvas>
    		
    	</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>