如何在HTML中实现下载存储在数据库的动态展示图片

你之前直接用<a href="" download>无效的核心原因是，download属性仅对同域静态资源生效，动态/跨域图片需要先转为Blob对象再触发下载，不需要修改后端逻辑，前端加几行代码即可实现需求：

第一步：修改HTML结构，添加下载按钮 #

删除img标签上不生效的controls属性，在全屏预览容器中新增下载按钮：

<!-- album starts -->
<div class="full-img" id="fullImgBox">
    <img src="images/img1.jpg" id="fullImg" class="media">
    <!-- 新增下载按钮，和关闭按钮平级，样式可自行调整 -->
    <span class="material-icons" onclick="downloadCurrentImg()" style="cursor: pointer; margin-right: 20px;">download</span>
    <span class="material-icons" onclick="closeFullImg()">close</span>
</div>
<!-- 下方img-gallery部分无需改动，和你原有代码一致 -->

第二步：新增下载逻辑的JS代码 #

在原有JS基础上新增下载当前展示图片的函数：

var fullImgBox = document.getElementById("fullImgBox");
var fullImg = document.getElementById("fullImg");

function openFullImg(pic) {
    fullImgBox.style.display = "flex";
    fullImg.src = pic;
}

function closeFullImg() {
    fullImgBox.style.display = "none";
}

// 新增下载当前图片的函数
async function downloadCurrentImg() {
    try {
        // 获取当前展示的图片地址
        const imgSrc = fullImg.src;
        // 加载图片资源转为Blob对象
        const response = await fetch(imgSrc);
        const blob = await response.blob();
        // 生成临时下载链接
        const blobUrl = window.URL.createObjectURL(blob);
        // 创建临时a标签触发下载
        const a = document.createElement('a');
        a.href = blobUrl;
        // 可自定义文件名，也可从原地址提取真实文件名
        a.download = `gallery-img-${Date.now()}.jpg`;
        document.body.appendChild(a);
        a.click();
        // 清理临时资源避免内存占用
        document.body.removeChild(a);
        window.URL.revokeObjectURL(blobUrl);
    } catch (err) {
        console.error('图片下载失败：', err);
    }
}

注意事项 #

• 如果图片和你的网站属于不同域名，需要存储图片的服务端配置CORS规则，允许你的站点发起GET请求，否则fetch会报跨域错误。
• 如果需要保留原图片的文件名，可以在openFullImg执行时把原文件名存在全局变量中，下载时直接赋值给a.download即可。

内容的提问来源于stack exchange，提问作者obs