js 实现图片保存
使用 Canvas 实现图片保存
通过 Canvas 可以将图片绘制到画布上，再转换为可下载的格式。
// 创建 Canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置 Canvas 尺寸
canvas.width = imgElement.width;
canvas.height = imgElement.height;
// 绘制图片到 Canvas
ctx.drawImage(imgElement, 0, 0);
// 转换为 Data URL
const dataURL = canvas.toDataURL('image/png');
// 创建下载链接
const link = document.createElement('a');
link.href = dataURL;
link.download = 'image.png';
link.click();使用 FileSaver.js 库保存图片
FileSaver.js 是一个简化文件保存操作的库。
// 引入 FileSaver.js
import { saveAs } from 'file-saver';
// 保存图片
saveAs('image.png', 'downloaded-image.png');使用 Blob 对象保存图片
通过 Blob 对象可以直接处理二进制数据。
// 获取图片数据
fetch('image.png')
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'image.png';
link.click();
URL.revokeObjectURL(url);
});使用 HTML5 download 属性
对于已知 URL 的图片，可以直接使用 download 属性。
<a href="image.png" download="saved-image.png">保存图片</a>使用第三方库 html2canvas
html2canvas 可以将网页元素转换为图片。
// 引入 html2canvas
import html2canvas from 'html2canvas';
// 转换元素为图片
html2canvas(document.getElementById('element-to-capture')).then(canvas => {
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'screenshot.png';
link.click();
});注意事项
- 跨域图片需要服务器设置 CORS 头
- 大图片处理可能导致性能问题
- 移动端浏览器可能有不同限制
- 某些浏览器可能限制自动下载行为
以上方法覆盖了常见的图片保存需求，可根据具体场景选择合适方案。
