js 实现图片另存

使用 Canvas 实现图片另存为

通过 Canvas 将图片转换为数据 URL，再触发下载。适用于动态生成或需要处理的图片。

function saveImageFromCanvas(canvas, filename) {
  const link = document.createElement('a');
  link.download = filename || 'image.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
}

直接下载远程图片

通过 fetch 获取图片 Blob 数据后创建下载链接。需注意跨域问题。

async function saveRemoteImage(url, filename) {
  const response = await fetch(url);
  const blob = await response.blob();
  const blobUrl = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = blobUrl;
  a.download = filename || url.split('/').pop();
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(blobUrl);
}

通过 Base64 数据下载

适用于已有 Base64 编码的图片数据。

function saveBase64Image(base64Data, filename) {
  const link = document.createElement('a');
  link.download = filename || 'image.png';
  link.href = base64Data;
  link.click();
}

注意事项

跨域限制会影响远程图片下载，服务器需配置 CORS 头部 Chrome 可能拦截非用户触发的下载，需绑定到按钮点击事件 Safari 对程序化下载有额外限制，建议使用新标签页打开方式

兼容性解决方案

对于不支持 download 属性的旧浏览器，可改用新窗口打开方式：

function fallbackSave(imageUrl) {
  window.open(imageUrl, '_blank');
}