js 实现图片另存为

使用 HTML5 的 <a> 标签下载

通过创建 <a> 标签并设置 download 属性，可以直接触发图片下载。适用于已知图片 URL 且同源的情况：

function saveImage(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'image.jpg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

通过 Canvas 转换后下载

当需要处理跨域图片或动态修改图片时，可先将图片绘制到 Canvas 上再转换下载：

function saveCanvasImage(imgElement, filename) {
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.naturalWidth;
  canvas.height = imgElement.naturalHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0);

  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename || 'image.png';
    link.click();
    URL.revokeObjectURL(url);
  }, 'image/png');
}

处理 Blob 数据下载

适用于从 API 获取二进制数据或需要处理图片格式转换的场景：

function saveBlobAsImage(blob, filename) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'file.jpg';
  document.body.appendChild(link);
  link.click();
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }, 100);
}

注意事项

• 跨域图片需确保服务器允许 CORS
• iOS Safari 对 download 属性支持有限
• 大文件下载建议显示进度提示
• 动态创建的链接需要及时清理内存

完整示例代码

结合 Fetch API 的完整实现方案：

async function downloadImage(imageUrl, fileName) {
  try {
    const response = await fetch(imageUrl);
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);

    const anchor = document.createElement('a');
    anchor.href = blobUrl;
    anchor.download = fileName || 'downloaded-image';
    anchor.style.display = 'none';

    document.body.appendChild(anchor);
    anchor.click();

    setTimeout(() => {
      document.body.removeChild(anchor);
      URL.revokeObjectURL(blobUrl);
    }, 100);
  } catch (error) {
    console.error('Download failed:', error);
  }
}