当前位置：首页 > JavaScript

js 实现图片另存为

2026-01-30 16:50:39JavaScript

实现图片另存为功能

在JavaScript中实现图片另存为功能，可以通过以下几种方法实现：

方法一：使用<a>标签的download属性

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

该方法适用于已知图片URL的情况，浏览器会自动触发下载。

方法二：通过Canvas转换后下载

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

适用于需要保存Canvas绘制的图像内容。

方法三：处理跨域图片

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

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

处理跨域图片时需要确保服务器允许CORS。

方法四：使用FileSaver.js库 安装库：

npm install file-saver

使用示例：

import { saveAs } from 'file-saver';

function saveImageUsingLibrary(url, filename) {
  fetch(url)
    .then(res => res.blob())
    .then(blob => {
      saveAs(blob, filename || 'image.png');
    });
}

FileSaver.js提供了更强大的文件保存功能。

注意事项

js 实现图片另存为