下载图片用a标签还是Image对象

export function downloadPic(imgsrc, name) {
  // Image对象，加载图片资源
  let image = new Image()
  // 解决跨域canvas污染问题，允许加载跨域图片
  image.setAttribute('crossOrigin', 'anonymous')
  // 图片加载完成后回调
  image.onload = function () {
    // 创建一个canvas元素，将图片绘制到canvas上
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    // 将canvas中的图片数据转换为base64编码的字符串
    let url = canvas.toDataURL('image/png')
    // 通过创建a标签，设置download属性和href为DataURL，触发下载。
    let a = document.createElement('a')
    a.download = name
    a.href = url
    a.click()
  }
  image.src = imgsrc
}

为什么要创建 Image 对象？

1. 加载图片并处理：

   • Image 对象允许我们在浏览器加载图片，并对其进行处理（如绘制到 Canvas 上）。
   •  <a> 标签不能处理。

2. 解决跨域问题：

   • 通过设置 crossOrigin 属性，可以加载跨域图片。
   • 如果直接使用 <a> 标签，跨域图片可能无法加载或导致安全错误。

3. 生成 DataURL：

   • 将图片绘制到 Canvas 上后，可以通过 toDataURL 方法将图片数据转换为 base64 编码的字符串。
   • 这种方式可以在客户端生成可下载的链接，而不需要依赖服务器的下载功能。

总结

• 直接使用 <a> 标签：同源场景图片下载场景。
• 使用 Image 对象和 Canvas：跨域场景图片下载，或者需要对图片进行客户端处理的场景。

特性	直接使用 <a> 标签下载	使用 Image 对象和 Canvas 下载
跨域支持	不支持跨域，除非服务器配置了CORS	支持跨域，通过 crossOrigin 属性解决
图片处理能力	无法对图片进行客户端处理	可以对图片进行缩放、裁剪、添加水印等处理
实现复杂度	简单，只需一个 <a> 标签	复杂，需要创建 Image 对象和 Canvas
性能	高效，直接从服务器下载	性能消耗较大，尤其是对大图片
适用场景	同源图片，简单下载	跨域图片，需要客户端处理图片