js 实现图片另存为
实现图片另存为的方法
在JavaScript中实现图片另存为功能，可以通过以下方式完成：
使用<a>标签的download属性
创建一个隐藏的<a>标签，设置其href为图片URL，download属性为文件名，触发点击事件。
function saveImage(url, filename) {
const a = document.createElement('a');
a.href = url;
a.download = filename || 'image.jpg';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}处理跨域图片（Canvas转换）
若图片跨域，需先通过Canvas绘制并转换为DataURL。
function saveCrossOriginImage(url, filename) {
const img = new Image();
img.crossOrigin = 'Anonymous';
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);
const dataURL = canvas.toDataURL('image/png');
saveImage(dataURL, filename);
};
img.src = url + '?t=' + new Date().getTime(); // 避免缓存
}Blob对象下载（适用于动态生成内容）
通过Fetch API获取图片为Blob对象，再转换为对象URL。
async function saveImageFromBlob(url, filename) {
const response = await fetch(url);
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
saveImage(blobUrl, filename);
URL.revokeObjectURL(blobUrl); // 释放内存
}注意事项
- 跨域图片需服务器配置
Access-Control-Allow-Origin头部 - Chrome可能阻止非同源下载，建议在用户交互事件（如点击）中触发
- 移动端部分浏览器可能不支持
download属性
完整示例代码
<button onclick="downloadImage()">保存图片</button>
<script>
function downloadImage() {
const imageUrl = 'https://example.com/image.jpg';
saveImage(imageUrl, 'my_image.jpg');
}
function saveImage(url, filename) {
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>以上方法覆盖了常见场景下的图片保存需求，可根据实际项目需求选择合适方案。
