一波在canvas下载跨域图片的坑里疯狂试探的操作

 常见的一些文件上传组件都会在上传后附加一个可点击的文件名，如图中的xxx.png，这个文件名由标签包裹，业务需求要求点击xxx.png下载对应的文件，而常见文件上传组件的效果都是跳转到链接页面。

 解决方法是利用preventDefault()方法清除组件中标签的跳转效果，然后获取href并自行创建新的带有download属性的标签进行下载操作。

<div onclick="interceptor()">
	
	<a href="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540885002&di=afbac9061dd1e9401b6b2fe448f05bd5&src=http://i1.hdslb.com/bfs/archive/21464a12b2a5f400e2e6dc554b8665664c18c141.jpg">这是一个被封装起来可点击到的a标签a>
	
div>
<script>
function interceptor() {
	const element = this.event.target; // 获取到 
 内被点击的节点
	if (element.tagName !== 'A') {
		return; // 判断被点击的节点是不是  标签
	}
	this.event.preventDefault(); // 如果是  标签则清除默认行为，即清除跳转到 href 的行为
	const href = element.getAttribute('href'); // 获取  标签内的 href

	const a = document.createElement('a'); // 创造新的  标签用于下载
	a.setAttribute('download', ''); // 添加 download 属性
	// 仅 chrome、firefox 支持 download 属性，其他浏览器应使用