通过 imageUrl 下载图片

方法一

首先创建了一个<a>元素，并设置了它的href属性为你想要下载的图片URL，同时通过download属性指定了下载时的文件名。然后，这个元素被临时添加到文档中并触发点击事件来开始下载，之后立即从文档中移除，以保持页面的干净。

请注意，这种方法依赖于浏览器支持download属性，大多数现代浏览器都支持这一特性，但一些旧版浏览器可能不支持。此外，由于跨域安全策略，直接从其他源下载图片可能会受到限制，除非服务器端设置了适当的CORS头允许这种操作。

function downloadImage(url, name) {
  // 创建隐藏的可下载链接
  var element = document.createElement('a');
  element.setAttribute('href', url);
  element.setAttribute('download', name || 'image'); // 设置图片名称，默认为'image'

  // 触发点击
  document.body.appendChild(element);
  element.click();

  // 然后移除
  document.body.removeChild(element);
}

// 使用方法
var imageUrl = 'https://example.com/path/to/image.jpg';
var imageName = 'myImage.jpg'; // 自定义文件名（可选）
downloadImage(imageUrl, imageName);

如果你发现执行上述JavaScript代码后浏览器打开了新窗口而不是直接下载图片，这可能是由于浏览器的安全策略或特定浏览器的行为差异所致。（可以使用 方法二 来解决）

方法二

使用Blob对象和URL.createObjectURL方法来创建一个临时的URL指向图片数据，然后触发下载。这种方式不涉及修改<a>标签的href属性为外部URL，因此可以绕过一些浏览器对于跨域资源直接下载的限制。

async function downloadImage(url, name = null) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const blob = await response.blob();
    
    // 如果用户没有传入name参数，则从URL中提取
    if (name === null) {
      const urlParts = url.split('/');
      name = decodeURIComponent(urlParts[urlParts.length - 1]).split('?')[0];
    }
    
    const urlCreator = window.URL || window.webkitURL;
    const downloadUrl = urlCreator.createObjectURL(blob);
    
    const element = document.createElement('a');
    element.setAttribute('href', downloadUrl);
    element.setAttribute('download', name);
    document.body.appendChild(element);
    
    element.click();
    
    document.body.removeChild(element);
    urlCreator.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.error('Error downloading image:', error);
  }
}

// 使用方法
var imageUrl = 'https://example.com/path/to/image.jpg';

// 不传入name参数，自动从URL提取
downloadImage(imageUrl);

// 传入name参数
var imageName = 'customImageName.jpg';
downloadImage(imageUrl, imageName);