a标签可跨域下载图片文件

文档参考：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
此处两种方法便是使用data:URL (base64格式) 和 blob:URL (文件流格式)实现跨域下载
data: URL方式：

downloadByData (url) {
  let image = new Image()  //创建图片对象
  image.setAttribute('crossOrigin', 'anonymous') //设置允许跨域
  image.src = url //赋值src
  image.onload = () => {
    //等待图片加载完成创建canvas
    let canvas = document.createElement('canvas')
    //将图片绘制到canvas画布上
    canvas.width = image.width
    canvas.height = image.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height)
    //获取图片文件格式  jpg/jpeg/png
    let ext = image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase()
    //导出画布快照  此时已越过跨域限制成功取到图片数据
    let dataURL = canvas.toDataURL('image/' + ext)
    //创建a标签
    const a = document.createElement("a");
    // 赋值a标签download属性值，标明该a标签提供下载功能，同时该属性指定了下载时的文件名称
    a.download = this.downloadName;
    //赋值a标签下载地址，即canvas导出的画布快照 base64格式的图片地址
    a.href = dataURL;
    //添加a标签到dom中
    document.body.appendChild(a);
    //触发a标签点击事件 触发下载
    a.click();
    //下载完成 删除多余的a标签  保持页面原有元素不动
    document.removeChild(a);
  }
},

blob: URL方式：

downloadByBlob (url) {
  let image = new Image()  //创建图片对象
  image.setAttribute('crossOrigin', 'anonymous') //设置允许跨域
  image.src = url //赋值src
  image.onload = () => {
    //等待图片加载完成创建canvas
    let canvas = document.createElement('canvas')
    //将图片绘制到canvas画布上
    canvas.width = image.width
    canvas.height = image.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, image.width, image.height)
    //此处同样是利用canvas自带API将画布数据导出为bolb流格式
    canvas.toBlob((blob) => {
      let url = URL.createObjectURL(blob)
      const a = document.createElement("a");
      a.download = this.downloadName;
      // 直接将canvas导出的bolb:URL 格式赋值为a标签的href属性 同样进行点击触发下载
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.removeChild(a);
      // 释放URL对象
      URL.revokeObjectURL(url)
    })
  }
},