deepseek导出PNG

下载为PNG格式，临时解除body及克隆元素的高度限制，确保完整截图
当前为 2025-02-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         deepseek导出PNG
// @namespace    https://www.yffjglcms.com/
// @version      1.0
// @description  下载为PNG格式，临时解除body及克隆元素的高度限制，确保完整截图
// @author       yffjglcms
// @match        *://*.chat.deepseek.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/dom-to-image-more/3.5.0/dom-to-image-more.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 创建下载按钮
    const downloadButton = document.createElement("button");
    downloadButton.innerText = "下载DIV为PNG";
    downloadButton.style.position = "fixed";
    downloadButton.style.top = "10px";
    downloadButton.style.right = "10px";
    downloadButton.style.zIndex = "1000";
    downloadButton.style.padding = "10px";
    downloadButton.style.backgroundColor = "#4CAF50";
    downloadButton.style.color = "white";
    downloadButton.style.border = "none";
    downloadButton.style.cursor = "pointer";
    document.body.appendChild(downloadButton);

    // 获取目标元素（这里假设为 '#root > div > div' 中的第二个元素）
    // const targetDiv = document.querySelectorAll('#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div > div:nth-child(1)')[0];

    const passLimit = 10;

    // 进行截图
    const takeScreenshot = async (element, width, height, additionalScale = 1, currentPass = 1) => {
        const ratio = window.devicePixelRatio || 1;
        const scale = ratio * 2 * additionalScale;
        let canvas = null;
        try {
            canvas = await html2canvas(element, {
                scale,
                useCORS: true,
                width: width,
                height: height,
                scrollX: 0,
                scrollY: 0,
                backgroundColor: 'rgb(41, 42, 45)'
            });
        } catch (error) {
            console.error(`截图失败，参数 height=${height} width=${width} scale=${scale}`, error);
        }
        if (!canvas) {
            if (currentPass > passLimit) return null;
            return takeScreenshot(element, width, height, additionalScale / 1.4, currentPass + 1);
        }
        const context = canvas.getContext("2d");
        if (context) context.imageSmoothingEnabled = false;
        const dataUrl = canvas.toDataURL("image/png", 1);
        if (!dataUrl || dataUrl === "data:,") {
            if (currentPass > passLimit) return null;
            return takeScreenshot(width, height, additionalScale / 1.4, currentPass + 1);
        }
        return dataUrl;
    };

    downloadButton.addEventListener("click", async () => {

        const targetDiv = document.querySelectorAll('#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div')[0];
        const tmpHideDiv = document.querySelectorAll('#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div > div:not(:first-child)');
        if (!targetDiv) {
            console.error("目标DIV未找到，请检查选择器！");
            return;
        }

        // 使用元素的实际内容尺寸
        const width = targetDiv.scrollWidth;
        const height = targetDiv.scrollHeight;

        // 暂时隐藏不必要元素
        const bakDisplay = {}
        tmpHideDiv.forEach(e=>{
            bakDisplay[e.id] = e.style.display
            e.style.display = 'none'
        })

        // 截图
        const dataUrl = await takeScreenshot(targetDiv, width, height);

        // 恢复隐藏不必要元素
        tmpHideDiv.forEach(e=>{
            e.style.display = bakDisplay[e.id]
        })

        if (!dataUrl) {
            alert("截图失败！");
            return;
        }
        // 创建下载链接并触发下载
        const downloadLink = document.createElement("a");
        downloadLink.href = dataUrl;
        downloadLink.download = document.title || "download.png";
        downloadLink.click();
    });
})();
欢迎访问Greasy Fork镜像
