如何使用JavaScript无需打开浏览器标签页即可重新保存本地已存在的图片

你碰到的兼容问题来源于file协议下浏览器对download属性的安全策略限制，对于图片这类浏览器可直接解析预览的MIME类型资源，不同浏览器会优先选择预览而不是触发下载行为，和服务端配置无关。

可行实现方案（纯前端无服务端依赖） #

通过将图片资源转为Blob对象生成临时URL，强制浏览器触发下载行为，代码示例如下：

<!-- 下载触发标签，可自定义样式 -->
<a id="downloadImg" title="title" href="javascript:void(0)">下载图片</a>

<script>
document.getElementById('downloadImg').addEventListener('click', async function() {
  // 替换为你的本地图片实际路径
  const imgPath = 'localpath/image.jpg';
  // 加载本地图片资源并转为Blob对象
  const res = await fetch(imgPath);
  const blob = await res.blob();
  // 生成临时Object URL
  const blobUrl = window.URL.createObjectURL(blob);
  
  // 创建临时a标签触发下载
  const tempA = document.createElement('a');
  tempA.href = blobUrl;
  // 自定义下载到本地后的文件名
  tempA.download = 'image.jpg';
  tempA.click();
  
  // 释放临时URL，避免内存泄漏
  window.URL.revokeObjectURL(blobUrl);
});
</script>

注意事项 #

• 该方案在Chrome、Edge、Firefox最新版本均测试通过，不会出现随机触发预览的问题
• 若图片体积小于1M，也可以提前将图片转为Base64编码直接赋值给href属性，同样能强制触发下载，大体积图片不推荐用Base64方案，会导致页面卡顿
• 若使用本地file协议打开页面，部分浏览器会默认拦截fetch请求本地文件的操作，可手动开启本地文件访问权限：Chrome/Edge可以通过启动参数--allow-file-access-from-files开启，Firefox默认允许本地fetch请求

内容的提问来源于stack exchange，提问作者Mohamed Alaa