<template>
	<el-card class="box-card">
		<div>
			<h2 style="margin: 20px;">vue中,图片下载到本地,图片保存到本地</h2>
			<el-button type="primary" @click="downs()">下载图片</el-button>
		</div>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: ''
			};
		},
		methods: {
			// 1.解决图片不同源下载问题(访问的网站域名与服务器域名不一致)
			// imgsrc:代表图片地址, name:代表图片名称
			downloadIamge(imgsrc, name) { //下载图片地址和图片名
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute("crossOrigin", "anonymous");
				image.onload = function() {
					var canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext("2d");
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
					var a = document.createElement("a"); // 生成一个a元素
					var event = new MouseEvent("click"); // 创建一个单击事件
					a.download = name || "photo"; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},
			downs() {
				this.imgUrl = 'https://img2.baidu.com/it/u=2937803703,3095540904&fm=26&fmt=auto&gp=0.jpg';
				this.downloadIamge(this.imgUrl, '这是一张图片');
			},



			// 2.必须同源(访问的网站域名与服务器域名一致)才能下载
			// downs() {
			// 	this.imgUrl = 'https://img2.baidu.com/it/u=2937803703,3095540904&fm=26&fmt=auto&gp=0.jpg';
			// 	var alink = document.createElement("a");
			// 	alink.href = this.imgUrl;
			// 	alink.download = "这是一张图片"; //图片名
			// 	alink.click();
			// }
		}
	}
</script>

<style>
</style>