当前位置：首页 > JavaScript

js实现保存图片

2026-01-16 13:51:03JavaScript

使用Canvas绘制并保存图片

在HTML中创建一个Canvas元素，通过JavaScript绘制内容后转换为图片并保存。Canvas的toDataURL方法可将画布内容转为Base64编码的图片数据。

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

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

通过URL保存网络图片

对于已存在的网络图片，可通过创建隐藏的<a>标签触发下载。需注意跨域限制，服务器需配置CORS头才能成功下载。

function saveImageFromUrl(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);
}

使用FileSaver.js库简化操作

FileSaver.js库提供了更简单的API来处理文件保存操作，支持大文件保存和更兼容的下载方式。

import { saveAs } from 'file-saver';

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

// 直接保存URL
saveAs('https://example.com/image.jpg', 'example.jpg');

处理SVG图像的保存

SVG作为矢量图形需要先转换为Canvas，再通过Canvas进行保存。使用canvg库可在Canvas上渲染SVG。

import canvg from 'canvg';

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const svg = document.querySelector('svg');

canvg(canvas, svg.outerHTML);
const imgData = canvas.toDataURL('image/png');

const link = document.createElement('a');
link.download = 'converted-svg.png';
link.href = imgData;
link.click();