<template>
	<div>
		<vc-html-img ref="target" :parser="parser" crossorigin="anonymous" >
			<!-- 需要crossorigin加在第一个， 才能处理跨域 -->
			<img 
				src="https://wyatest.oss-cn-hangzhou.aliyuncs.com/image/1/20190518/102315/227984.jpg" 
				class="image"
			>
		</vc-html-img>
		<p>生成的图片</p>
		<img :src="src">
		<vc-button @click="handleClick">
			点击生成图片
		</vc-button>
		<vc-button @click="handleDown">
			点击生成图片并下载
		</vc-button>
	</div>
</template>

<script>
import { HtmlImg, Button } from '@wya/vc';

export default {
	components: {
		'vc-html-img': HtmlImg,
		'vc-button': Button
	},
	data() {
		return {
			src: ''
		};
	},
	methods: {
		async handleClick() {
			let res = await this.$refs.target.getImage();
			this.src = res.base64Image;
		},
		async handleDown() {
			let res = await this.$refs.target.download();
			this.src = res.base64Image;
		},
		parser(url) {
			return new Promise((resolve) => {
				setTimeout(() => {
					console.log(url);
					resolve(url);
				}, 3000);
			});
		}
	}
};
</script>
<style>
.image {
	width: 200px;
}
</style>