当前位置：首页 > JavaScript

js 实现图片保存

2026-01-30 14:07:28JavaScript

使用Canvas实现图片保存

通过Canvas可以将图片绘制并保存为文件。需要先将图片加载到Canvas，再转换为Blob或Data URL。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  canvas.toBlob(function(blob) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'image.png';
    a.click();
  }, 'image/png');
};

img.src = 'image.jpg';

使用a标签下载图片

对于服务器上的图片文件，可以直接通过a标签的download属性触发下载。

js 实现图片保存

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

处理跨域图片

当图片资源存在跨域限制时，需要确保服务器设置正确的CORS头，或通过代理服务器获取图片。

js 实现图片保存

fetch('https://example.com/image.jpg', {
  mode: 'cors',
  headers: {
    'Origin': window.location.origin
  }
})
.then(response => response.blob())
.then(blob => {
  const url = URL.createObjectURL(blob);
  downloadImage(url, 'image.jpg');
});

保存网页截图

使用html2canvas库可以捕获网页区域并保存为图片。

import html2canvas from 'html2canvas';

html2canvas(document.getElementById('target-element')).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = imgData;
  link.click();
});

批量下载多张图片

通过Promise.all实现多张图片的并行下载。

function downloadMultipleImages(urls) {
  urls.forEach((url, index) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = `image-${index}.jpg`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
}