js 实现图片另存

使用 Canvas 实现图片另存

通过 Canvas 绘制图片并转换为可下载的格式：

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

使用 Blob 对象保存图片

适用于从 URL 获取图片资源后保存：

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

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

保存 SVG 格式图片

处理 SVG 图形的保存方案：

function saveSvg(svgElement, filename) {
  const serializer = new XMLSerializer();
  const svgStr = serializer.serializeToString(svgElement);

  const blob = new Blob([svgStr], {type: 'image/svg+xml'});
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'image.svg';
  link.click();
  URL.revokeObjectURL(url);
}

处理跨域图片限制

解决跨域资源保存时的权限问题：

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);

    saveImageFromCanvas(canvas, filename);
  };

  img.src = url + (url.includes('?') ? '&' : '?') + 't=' + Date.now();
}

注意事项

浏览器安全策略可能限制某些保存操作，特别是跨域资源。

iOS Safari 需要用户直接触发下载事件，不能通过异步回调执行。

大文件下载可能需要显示加载状态，避免用户误认为操作失败。