什么模块可以网页转成图片哦

guoyijie · 发表于 2025-3-13 05:58:16

想把返回得一个网页内容以图片的形式截出来，保留网页原UI

承易 · 发表于 2025-3-13 05:58:17

[JavaScript] 纯文本查看 复制代码

// ==UserScript==
// @name         网页转图片
// @Namespace    http://tampermonkey.net/
// @Version      0.1
// @description  网页转图片
// @author       承易
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    
    function capturePage() {
        html2canvas(document.body).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            const link = document.createElement('a');
            link.href = imgData;
            link.download = 'webpage_capture.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    }

    
    function createCaptureButton() {
        const button = document.createElement('button');
        button.innerText = '网页转图片';
        button.style.position = 'fixed';
        button.style.top = '10px';
        button.style.right = '10px';
        button.style.zIndex = '1000';
        button.onclick = capturePage;
        document.body.appendChild(button);
    }

    
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
    document.head.appendChild(script);
    script.onload = () => {
        console.log('html2canvas loaded');
        createCaptureButton(); 
    };
})();

把以上代码复制到浏览器扩展油猴插件中，刷新其他网页就会有一个按钮网页转图片，点一下就会保存网页成图片了，

这是我刚试的，保存的图片