当前位置：首页 > JavaScript

js 实现图片保存

2026-03-01 05:11:31JavaScript

使用Canvas实现图片保存

通过Canvas可以将图片绘制到画布上，再转换为可下载的格式。以下是具体实现方式：

// 创建Canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置Canvas尺寸与图片一致
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;

  // 绘制图片到Canvas
  ctx.drawImage(img, 0, 0);

  // 转换为DataURL并触发下载
  const dataURL = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'image.png';
  link.href = dataURL;
  link.click();
};

使用File API实现图片保存

对于用户上传的图片文件，可以直接通过File API进行处理：

// 获取input元素
const input = document.querySelector('input[type="file"]');

input.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const link = document.createElement('a');
    link.download = file.name;
    link.href = event.target.result;
    link.click();
  };

  reader.readAsDataURL(file);
});

使用第三方库实现高级功能

对于需要更复杂功能的场景，可以考虑使用第三方库：

// 使用FileSaver.js库
import { saveAs } from 'file-saver';

// 保存Blob对象
const blob = new Blob([imageData], { type: 'image/png' });
saveAs(blob, 'image.png');

// 保存DataURL
saveAs('data:image/png;base64,...', 'image.png');

处理跨域图片问题

当图片来自不同源时，需要特殊处理：

const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = 'https://example.com/image.jpg';

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

  try {
    const dataURL = canvas.toDataURL('image/png');
    // 处理下载逻辑
  } catch (e) {
    console.error('跨域图片保存失败', e);
  }
};

响应式图片保存方案

针对不同屏幕尺寸保存适配后的图片：

function saveResponsiveImage(imgElement, fileName) {
  const canvas = document.createElement('canvas');
  const width = imgElement.clientWidth;
  const height = imgElement.clientHeight;

  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0, width, height);

  const link = document.createElement('a');
  link.download = fileName || 'image.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
}

js 实现图片保存