【原创】豆包高清无码图片下载_怎么从豆包生成的图片 src下载高清图-CSDN博客

本文链接：https://blog.csdn.net/jxyk2007/article/details/148059307

✅ 功能概览

功能分类	具体内容
🎯 下载目标	真实高清图链接，非缩略图，来自页面中 `<img data-testid="in_painting_picture">` 标签
⬇ 下载方式	使用 `fetch + blob` 强制下载，不会弹新标签页，不会被浏览器拦截
📦 下载按钮位置	按钮位于每张图的下方，居中显示，不遮挡图片，不破坏原有布局
💡 按钮文案	美观文案：`⬇ 下载高清无水印`，风格统一
🔁 自动监听	通过 `MutationObserver` 监听页面变化，自动为新加载的图片添加按钮
🪵 控制台日志	控制台输出每张图的处理状态：包括是否找到高清图、按钮添加、下载完成等
🧼 防止重复	判断是否已有按钮，避免重复插入或多次绑定事件

📸 界面效果

每张图下方出现蓝色按钮：
⬇ 下载高清无水印
点击后立即下载高清无水印图片
不会跳转，不会打开新标签页

🚀 可扩展方向（可选功能）：

想加功能？	描述
✅ 一键下载	页面顶部加个「一键下载全部高清图」按钮
✅ 命名可控	下载时按「描述+编号」或时间戳命名
✅ 多格式	支持高清图自动切换 .png / .webp 下载
✅ 多语言 UI	按钮支持中英文切换（适合国际用户）

1.浏览器edge，安装油猴

// ==UserScript==
// @name         豆包高清图下载按钮（按钮在图下方）
// @namespace    https://www.doubao.com/
// @version      1.7
// @description  每张图下方添加下载高清图按钮，使用fetch强制保存
// @match        https://www.doubao.com/chat/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    function log(msg, ...args) {
        console.log(`[豆包下载脚本] ${msg}`, ...args);
    }

    function getAllHDImageURLs() {
        const hdImages = document.querySelectorAll('img[data-testid="in_painting_picture"]');
        return Array.from(hdImages).map(img => img.src);
    }

    async function downloadImage(url, filename) {
        try {
            log(`下载中: ${filename}`);
            const res = await fetch(url);
            const blob = await res.blob();
            const blobUrl = URL.createObjectURL(blob);

            const a = document.createElement('a');
            a.href = blobUrl;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(blobUrl);
            log(`下载完成: ${filename}`);
        } catch (err) {
            console.error(`下载失败: ${filename}`, err);
        }
    }

function addDownloadButtons() {
    const imageItems = document.querySelectorAll('.image-box-grid-item-SLyKVq');
    const hdUrls = getAllHDImageURLs();

    imageItems.forEach((item, index) => {
        // 避免重复添加
        if (item.querySelector('.tampermonkey-download-container')) return;

        const hdUrl = hdUrls[index];
        if (!hdUrl) {
            log(`第 ${index + 1} 张图找不到高清链接`);
            return;
        }

        // 创建按钮容器（居中、下方）
        const container = document.createElement('div');
        container.className = 'tampermonkey-download-container';
        container.style.display = 'flex';
        container.style.justifyContent = 'center';
        container.style.marginTop = '8px';

        // 按钮本体
        const button = document.createElement('button');
        button.textContent = '⬇ 下载高清无码无水印';
        button.style.padding = '6px 12px';
        button.style.fontSize = '12px';
        button.style.backgroundColor = '#007bff';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '4px';
        button.style.cursor = 'pointer';
        button.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';

        button.addEventListener('click', () => {
            downloadImage(hdUrl, `doubao-hd-${index + 1}.png`);
        });

        container.appendChild(button);
        item.appendChild(container);
        log(`按钮已添加到第 ${index + 1} 张图片`);
    });
}


    const observer = new MutationObserver(() => {
        log('检测到页面更新，尝试添加按钮...');
        addDownloadButtons();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    log('初始化完成，准备添加下载按钮...');
    addDownloadButtons();
})();

打开打包，生成图片，