js实现图片另存为

使用Canvas和下载链接实现图片另存为

通过Canvas将图片转换为数据URL，再创建下载链接触发保存：

function saveImage(url, filename) {
  const canvas = document.createElement('canvas');
  const img = document.createElement('img');
  img.crossOrigin = 'Anonymous';

  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    const a = document.createElement('a');
    a.href = canvas.toDataURL('image/png');
    a.download = filename || 'download.png';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  img.src = url;
}

直接使用Blob对象下载

适用于已获取二进制数据的场景：

function saveBlobAsImage(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'download.jpg';
  document.body.appendChild(a);
  a.click();

  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, 100);
}

处理跨域图片的解决方案

当图片存在跨域限制时：

function saveCrossOriginImage(url, filename) {
  fetch(url, { mode: 'cors' })
    .then(response => response.blob())
    .then(blob => {
      saveBlobAsImage(blob, filename);
    })
    .catch(err => console.error('下载失败:', err));
}

注意事项

• 跨域请求需要服务器配置CORS头
• 某些浏览器可能限制自动下载行为
• 大文件建议显示下载进度提示
• iOS Safari有特殊限制，可能需要用户显式操作

完整示例（兼容多数现代浏览器）

async function downloadImage(imageUrl, saveName) {
  try {
    const response = await fetch(imageUrl, { mode: 'cors' });
    if (!response.ok) throw new Error('网络响应不正常');

    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = saveName || 'image_' + new Date().getTime() + '.jpg';
    document.body.appendChild(link);
    link.click();

    setTimeout(() => {
      document.body.removeChild(link);
      URL.revokeObjectURL(blobUrl);
    }, 100);
  } catch (error) {
    console.error('下载失败:', error);
    // 备用方案尝试Canvas方式
    saveImage(imageUrl, saveName);
  }
}