当前位置：首页 > JavaScript

js 实现图片另存为

2026-04-04 08:30:52JavaScript

实现图片另存为的方法

在JavaScript中实现图片另存为功能，可以通过以下方式完成：

使用<a>标签的download属性

创建一个隐藏的<a>标签，设置其href为图片URL，download属性为文件名，触发点击事件。

js 实现图片另存为

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

处理跨域图片（Canvas转换）

若图片跨域，需先通过Canvas绘制并转换为DataURL。

js 实现图片另存为

function saveCrossOriginImage(url, filename) {
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL('image/png');
    saveImage(dataURL, filename);
  };
  img.src = url + '?t=' + new Date().getTime(); // 避免缓存
}

Blob对象下载（适用于动态生成内容）

通过Fetch API获取图片为Blob对象，再转换为对象URL。

async function saveImageFromBlob(url, filename) {
  const response = await fetch(url);
  const blob = await response.blob();
  const blobUrl = URL.createObjectURL(blob);
  saveImage(blobUrl, filename);
  URL.revokeObjectURL(blobUrl); // 释放内存
}

注意事项

跨域图片需服务器配置Access-Control-Allow-Origin头部
Chrome可能阻止非同源下载，建议在用户交互事件（如点击）中触发
移动端部分浏览器可能不支持download属性

完整示例代码

<button onclick="downloadImage()">保存图片</button>
<script>
  function downloadImage() {
    const imageUrl = 'https://example.com/image.jpg';
    saveImage(imageUrl, 'my_image.jpg');
  }

  function saveImage(url, filename) {
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
</script>

以上方法覆盖了常见场景下的图片保存需求，可根据实际项目需求选择合适方案。