jquery下载图片

使用jQuery下载图片的方法

通过创建隐藏的<a>标签触发下载

创建一个隐藏的<a>元素，设置其href为图片URL，并添加download属性。使用jQuery触发点击事件实现下载：

function downloadImage(url, filename) {
    $('<a>', {
        href: url,
        download: filename || 'image.jpg'
    })[0].click();
}

使用Blob对象处理跨域图片

当遇到跨域问题时，可以通过AJAX获取图片数据并转换为Blob对象：

function downloadCrossOriginImage(url, filename) {
    $.ajax({
        url: url,
        xhrFields: { responseType: 'blob' },
        success: function(data) {
            const blobUrl = URL.createObjectURL(data);
            $('<a>', {
                href: blobUrl,
                download: filename || 'image.jpg'
            })[0].click();
            URL.revokeObjectURL(blobUrl);
        }
    });
}

注意事项

• 现代浏览器要求下载操作必须由用户交互（如点击事件）直接触发
• download属性在不同浏览器中的支持程度可能不同
• 跨域请求需要服务器配置CORS头部允许访问

完整示例代码

$(document).ready(function() {
    $('#download-btn').click(function() {
        const imageUrl = 'https://example.com/image.jpg';
        downloadImage(imageUrl, 'custom_filename.jpg');
    });
});