点击图片全屏时动态创建/销毁S3下载按钮的实现求助

1. 调整PHP批量加载图片的代码 #

给每个图片标签添加data-filename属性，用来存储原始文件名，方便后续拼接S3下载链接：

<?php
// 预定义S3下载的基础路由
$s3_base_url = 'https://your-s3-bucket.s3.amazonaws.com/your-folder/';
// 假设你从目录或数据库获取的图片文件名数组
$image_list = ['summer-beach.jpg', 'mountain-view.png', 'city-night.jpeg'];
?>

<div class="image-grid">
    <?php foreach($image_list as $img_name): ?>
        <img 
            src="path/to/your/thumbnails/<?php echo $img_name; ?>" 
            alt="Gallery image: <?php echo $img_name; ?>"
            data-filename="<?php echo $img_name; ?>"
            class="gallery-img"
        >
    <?php endforeach; ?>
</div>

2. 实现全屏+动态按钮的JavaScript逻辑 #

直接替换或补充你现有的全屏脚本，以下是完整的兼容版代码：

// 从PHP传入S3基础路由（也可以直接写死在这里）
const S3_BASE_URL = '<?php echo $s3_base_url; ?>';
let downloadButton = null;

// 给所有图片绑定点击全屏事件
document.querySelectorAll('.gallery-img').forEach(img => {
    img.addEventListener('click', () => {
        // 兼容各浏览器的全屏API
        if (img.requestFullscreen) {
            img.requestFullscreen();
        } else if (img.webkitRequestFullscreen) {
            img.webkitRequestFullscreen();
        } else if (img.mozRequestFullScreen) {
            img.mozRequestFullScreen();
        } else if (img.msRequestFullscreen) {
            img.msRequestFullscreen();
        }
        // 根据当前图片文件名创建下载按钮
        createDownloadBtn(img.dataset.filename);
    });
});

// 监听全屏状态变化（兼容各浏览器）
document.addEventListener('fullscreenchange', handleFullscreenToggle);
document.addEventListener('webkitfullscreenchange', handleFullscreenToggle);
document.addEventListener('mozfullscreenchange', handleFullscreenToggle);
document.addEventListener('MSFullscreenChange', handleFullscreenToggle);

// 全屏状态切换时的处理函数
function handleFullscreenToggle() {
    // 判断是否退出全屏
    const isFullscreen = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.mozFullScreenElement || 
                         document.msFullscreenElement;
    if (!isFullscreen) {
        // 退出全屏则销毁按钮
        destroyDownloadBtn();
    }
}

// 创建下载按钮
function createDownloadBtn(filename) {
    // 先销毁已存在的按钮，避免重复创建
    destroyDownloadBtn();
    
    downloadButton = document.createElement('button');
    downloadButton.textContent = '下载原图';
    // 设置按钮样式：固定在页面底部居中，确保全屏时可见
    downloadButton.style.cssText = `
        position: fixed;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        padding: 14px 28px;
        background: #007bff;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 18px;
        cursor: pointer;
        z-index: 99999;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    `;
    // 绑定下载点击事件
    downloadButton.addEventListener('click', () => {
        const downloadUrl = S3_BASE_URL + filename;
        // 通过创建a标签触发浏览器下载
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = filename;
        link.click();
    });
    // 将按钮添加到页面
    document.body.appendChild(downloadButton);
}

// 销毁下载按钮
function destroyDownloadBtn() {
    if (downloadButton && downloadButton.parentNode) {
        downloadButton.parentNode.removeChild(downloadButton);
        downloadButton = null;
    }
}

关键说明 #

• 用data-filename存储文件名，比从图片src中截取更可靠，避免因路径变化出错。
• 全屏事件监听兼容了Chrome、Firefox、Edge等主流浏览器的前缀API。
• 下载按钮采用固定定位，z-index设置足够高，确保不会被全屏图片遮挡。
• 下载逻辑通过创建隐藏的a标签模拟点击，能触发浏览器的默认下载行为，而非直接跳转页面。

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