jquery下载图片
使用 jQuery 下载图片的方法
方法一：通过创建 <a> 标签触发下载
通过动态创建 <a> 标签并设置 download 属性实现图片下载。示例代码如下：
function downloadImage(url, filename) {
const link = document.createElement('a');
link.href = url;
link.download = filename || 'image.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// 调用示例
$('#downloadBtn').click(function() {
const imageUrl = 'https://example.com/image.jpg';
downloadImage(imageUrl, 'custom-name.jpg');
});方法二：处理跨域图片（需服务器支持）
若图片来自不同域名且服务器允许跨域，可通过 fetch 或 XMLHttpRequest 获取 Blob 数据：
$('#downloadBtn').click(function() {
const imageUrl = 'https://example.com/image.jpg';
fetch(imageUrl)
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'image.jpg';
link.click();
URL.revokeObjectURL(url);
});
});方法三：Base64 图片下载
若图片以 Base64 格式存在，可直接下载：
$('#downloadBtn').click(function() {
const base64Data = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABA...';
const link = document.createElement('a');
link.href = base64Data;
link.download = 'image.jpg';
link.click();
});注意事项
- 跨域图片需服务器设置
Access-Control-Allow-Origin头 download属性在部分旧浏览器可能不兼容- 移动端浏览器可能限制自动下载行为
