js 实现图片保存
使用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属性触发下载。
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头，或通过代理服务器获取图片。
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);
});
}注意事项
- 浏览器安全策略可能限制跨域资源下载
- 大文件下载需要考虑内存管理和进度提示
- 移动端浏览器可能有不同的下载行为
- 某些浏览器可能阻止多文件自动下载
