一键生成海报JS

// 微信网页海报生成器 - 优化版
(function() {
    // 创建样式
    const style = document.createElement('style');
    style.textContent = `
        /* 海报生成按钮 */
        #generate-poster-btn {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            background: #07C160;
            color: white;
            border: none;
            border-radius: 25px;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(7, 193, 96, 0); }
            100% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0); }
        }

        /* 加载遮罩 */
        #poster-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: white;
            font-size: 16px;
        }

        .spinner {
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top: 3px solid #07C160;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 海报预览 */
        #poster-preview {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 10001;
            display: none;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            flex-direction: column;
        }

        #poster-wrapper {
            border-radius: 16px;
            overflow: hidden;
            max-width: 100%;
            max-height: calc(100% - 60px);
            margin-bottom: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }

        #poster-image {
            display: block;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* 关闭按钮 */
        #close-poster {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 30px;
            cursor: pointer;
            z-index: 10002;
            transition: transform 0.3s;
        }

        #close-poster:hover {
            transform: rotate(90deg);
        }

        /* 海报提示文字 */
        #poster-tip {
            color: white;
            font-size: 16px;
            text-align: center;
            margin-top: 10px;
            background: rgba(0,0,0,0.5);
            padding: 8px 16px;
            border-radius: 20px;
        }
    `;
    document.head.appendChild(style);

    // 创建按钮
    const button = document.createElement('button');
    button.id = 'generate-poster-btn';
    button.textContent = '一键生成高清海报';
    document.body.appendChild(button);

    // 创建加载遮罩
    const loading = document.createElement('div');
    loading.id = 'poster-loading';
    loading.innerHTML = `
        <div class="spinner"></div>
        <div>高清海报生成中...</div>
    `;
    document.body.appendChild(loading);

    // 创建预览容器
    const previewContainer = document.createElement('div');
    previewContainer.id = 'poster-preview';
    previewContainer.innerHTML = `
        <div id="close-poster">×</div>
        <div id="poster-wrapper">
            <img id="poster-image" src="" alt="生成的高清海报" />
        </div>
        <div id="poster-tip">长按保存高清海报</div>
    `;
    document.body.appendChild(previewContainer);

    // 获取元素引用
    const generateBtn = document.getElementById('generate-poster-btn');
    const loadingMask = document.getElementById('poster-loading');
    const posterImage = document.getElementById('poster-image');
    const posterDiv = document.getElementById('poster-preview');
    const closeBtn = document.getElementById('close-poster');

    // 检查浏览器兼容性
    if (!window.HTMLCanvasElement) {
        alert('您的浏览器不支持生成海报功能');
        generateBtn.style.display = 'none';
        return;
    }

    // 加载html2canvas库
    function loadHtml2Canvas() {
        return new Promise((resolve, reject) => {
            if (window.html2canvas) {
                resolve(window.html2canvas);
                return;
            }

            const script = document.createElement('script');
            script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
            script.onload = () => resolve(window.html2canvas);
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    // 生成海报函数 - 优化版
    async function generatePoster() {
        try {
            loadingMask.style.display = 'flex';

            const html2canvas = await loadHtml2Canvas();

            // 隐藏按钮和加载界面
            generateBtn.style.display = 'none';

            // 获取设备像素比，用于高清渲染
            const dpr = window.devicePixelRatio || 1;

            // 生成海报 - 提高清晰度
            const canvas = await html2canvas(document.body, {
                // 将缩放比例提高到设备像素比的3倍，生成更高清的图像
                scale: dpr * 3,
                useCORS: true,
                logging: false,
                backgroundColor: null, // 支持透明背景
                onclone: function(clonedDoc) {
                    // 从克隆文档中移除按钮和加载界面
                    const clonedBtn = clonedDoc.getElementById('generate-poster-btn');
                    const clonedLoading = clonedDoc.getElementById('poster-loading');
                    if (clonedBtn) clonedBtn.parentNode.removeChild(clonedBtn);
                    if (clonedLoading) clonedLoading.parentNode.removeChild(clonedLoading);

                    // 移除提示元素，确保不被包含在海报中
                    const clonedTip = clonedDoc.getElementById('poster-tip');
                    if (clonedTip) clonedTip.parentNode.removeChild(clonedTip);

                    // 移除预览容器，避免循环包含
                    const clonedPreview = clonedDoc.getElementById('poster-preview');
                    if (clonedPreview) clonedPreview.parentNode.removeChild(clonedPreview);
                }
            });

            // 恢复按钮显示
            generateBtn.style.display = 'block';

            // 转换为PNG格式图片 - 无损压缩
            const imgUrl = canvas.toDataURL('image/png');

            // 显示预览
            posterImage.src = imgUrl;
            posterDiv.style.display = 'flex';

        } catch (error) {
            console.error('生成海报失败:', error);
            alert('生成海报失败，请重试');
            generateBtn.style.display = 'block';
        } finally {
            loadingMask.style.display = 'none';
        }
    }

    // 关闭预览
    function closePoster() {
        posterDiv.style.display = 'none';
    }

    // 添加事件监听
    generateBtn.addEventListener('click', generatePoster);
    closeBtn.addEventListener('click', closePoster);
    posterDiv.addEventListener('click', function(e) {
        // 只有点击预览背景时才关闭
        if (e.target === posterDiv) {
            closePoster();
        }
    });

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', () => {
        // 调整按钮样式适应微信环境
        const isWechat = /micromessenger/i.test(navigator.userAgent);
        if (isWechat) {
            generateBtn.style.backgroundColor = '#07C160';
            generateBtn.style.boxShadow = '0 4px 12px rgba(7, 193, 96, 0.4)';
        }
    });
})();