canvas在图片上做标记，可以单一也可以多个

 

<template>
	<div id="">
		<div style="display: flex;">
			<canvas id="myCanvas" width="520" height="720" >这是浏览器不支持canvas时展示的信息</canvas>
		</div>
	</div>
</template>

<script>
const img = document.getElementById('img');
export default {
	name: 'app',
	data() {
		return {};
	},

	mounted() {
		this.canvasInit('')
	},
	methods: {
		
		canvasInit(srcImg) {
			var c = document.getElementById('myCanvas');
			var ctx = c.getContext('2d');
			var img = new Image();
			img.src = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1589884154&di=9b0f36e95282f61005aa4b7dc6a7698b&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg';
			img.onload = function() {
				ctx.drawImage(img, 0, 0, 520, 720);
                ctx.strokeStyle = 'darkred';
				ctx.strokeRect(0, 100, 115, 108);
				ctx.strokeRect(10, 50, 115, 108);
				ctx.strokeRect(50, 10, 10, 10);
			};
		}
	}
};
</script>

<style>
* {
	margin: 0;
	padding: 0;
}

</style>