<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>退休金(12年后提取)</title>
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            /* position: relative; */
            z-index: 1;
        }
        .main-content {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            position: relative;

            margin-top: 600px!important;

        }
        .poster-container {
            position: relative;
            flex: 0 0 auto;
            margin: 0;
            padding: 0;
        }
        .poster-text {
            position: absolute;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            word-break: break-all;
            overflow: hidden;
        }
        
        .poster-text.editable {
            cursor: move;
        }

        .poster-text:not(.editable) {
            pointer-events: none; /* 禁止鼠标事件 */
        }

        .resize-handle {
            position: absolute;
            right: 0;
            top: 0;
            width: 33.33%;
            height: 100%;
            cursor: se-resize;
            z-index: 1;
        }

        .poster-text-content {
            width: 100%;
            text-align: center;
            position: relative;
            z-index: 0;
            font-size: 24px;
        }
        .highlight {
            border: 2px solid #4CAF50; /* 高亮边框颜色 */
        }
        .form-group {
            position: relative;
            z-index: 10;
            transform: scale(3);
            transform-origin: top left;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js" defer></script>
    <!-- <script src="./html2canvas.min.js" defer></script> -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" defer></script>
</head>
<body>
    <div class="form-group m-3 p-2" style="width: 33.33%;">
        <label for="nameInput">输入名字:</label>
        <input type="text" class="form-control" id="nameInput" value="张女士">
        <label for="ageInput">输入年龄:</label>
        <input type="number" class="form-control" id="ageInput" value="40">
        <label for="amountInput">每年存金额:</label>
        <input type="number" class="form-control" id="amountInput" value="24">

        
        <button id="saveImageButton" class="btn btn-primary mt-3">下载图片</button>

    </div>



    <div class="container m-0 mt-5 p-0">
        <div class="main-content">
            <div class="poster-container">
                <img src="./retire12.png" alt="海报背景" style="max-width: 100%;">
            </div>
        </div>
    </div>

    <script>
        const posterContainer = document.querySelector('.poster-container');
        const configurations = [
            {
                "text": "张女士 <span style='font-size: 1.2em; font-weight: bold;'>40</span>岁",
                "textColor": "#ffffff",
                "backgroundColor": "#ffffff",
                "backgroundOpacity": "0",
                "position": {
                    "x": "70",
                    "y": "1112"
                },
                "size": {
                    "width": "1002",
                    "height": "194"
                },
                "fontSize": "120",
                "fontWeight": "normal",
                "textAlign": "left"
            },
            {
                "text": "连续5年，每年存<span style='font-size: 1.2em; font-weight: bold;'>24 万</span>",
                "textColor": "#f0f0f0",
                "backgroundColor": "#ffffff",
                "backgroundOpacity": "0",
                "position": {
                    "x": "70",
                    "y": "1262"
                },
                "size": {
                    "width": "902",
                    "height": "124"
                },
                "fontSize": "60",
                "fontWeight": "normal",
                "textAlign": "left"
            },
            {
                "text": "<span style='font-size: 1.5em; font-weight: bold;'>52 岁</span>退休后：",
                "textColor": "#f0f0f0",
                "backgroundColor": "#ffffff",
                "backgroundOpacity": "0",
                "position": {
                    "x": "70",
                    "y": "1440"
                },
                "size": {
                    "width": "902",
                    "height": "124"
                },
                "fontSize": "60",
                "fontWeight": "normal",
                "textAlign": "left"
            },
            {
                "text": "每年提取 <span style='font-size: 1.2em; font-weight: bold;'>12 万</span> '退休金'",
                "textColor": "#f0f0f0",
                "backgroundColor": "#ffffff",
                "backgroundOpacity": "0",
                "position": {
                    "x": "70",
                    "y": "1535"
                },
                "size": {
                    "width": "902",
                    "height": "124"
                },
                "fontSize": "60",
                "fontWeight": "normal",
                "textAlign": "left"
            },
            {
                "text": "(每月 <span style='font-size: 1.2em; font-weight: bold;'>10000</span>),提取余额持续增长",
                "textColor": "#f0f0f0",
                "backgroundColor": "#ffffff",
                "backgroundOpacity": "0",
                "position": {
                    "x": "70",
                    "y": "1620"
                },
                "size": {
                    "width": "1002",
                    "height": "124"
                },
                "fontSize": "60",
                "fontWeight": "normal",
                "textAlign": "left"
            },
        ];

        function createTextBox(config) {
            const textBox = document.createElement('div');
            textBox.className = 'poster-text';
            textBox.style.position = 'absolute';
            textBox.style.left = config.position.x + 'px';
            textBox.style.top = config.position.y + 'px';
            textBox.style.width = config.size.width + 'px';
            textBox.style.height = config.size.height + 'px';
            textBox.style.color = config.textColor;
            const color = hexToRGB(config.backgroundColor);
            const opacity = config.backgroundOpacity / 100;
            textBox.style.backgroundColor = `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity})`;

            const textContent = document.createElement('div');
            textContent.className = 'poster-text-content';
            textContent.innerHTML = config.text;
            textContent.style.fontSize = config.fontSize + 'px';
            textContent.style.fontWeight = config.fontWeight;
            textContent.style.textAlign = config.textAlign;
            textContent.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.5)';
            textBox.appendChild(textContent);

            posterContainer.appendChild(textBox);
            return textBox;
        }

        function hexToRGB(hex) {
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);
            return { r, g, b };
        }

        window.onload = function() {
            const nameInput = document.getElementById('nameInput');
            const ageInput = document.getElementById('ageInput');
            const amountInput = document.getElementById('amountInput');

            nameInput.addEventListener('input', function() {
                const name = nameInput.value;
                configurations[0].text = `${name} <span style='font-size: 1.2em; font-weight: bold;'>${ageInput.value}</span>岁`;
                updateTextBoxes();
            });

            ageInput.addEventListener('input', function() {
                const age = parseInt(ageInput.value, 10);
                configurations[0].text = `${nameInput.value} <span style='font-size: 1.2em; font-weight: bold;'>${age}</span>岁`;
                configurations[2].text = `<span style='font-size: 1.5em; font-weight: bold;'>${age + 12} 岁</span>退休后：`;
                updateTextBoxes();
            });

            amountInput.addEventListener('input', function() {
                const amount = amountInput.value;
                configurations[1].text = `连续5年，每年存<span style='font-size: 1.2em; font-weight: bold;'>${amount} 万</span>`;
                
                // 计算每年提取金额为输入金额的一半，保留一位小数
                let halfAmount = (amount / 2).toFixed(1);
                
                // 如果 halfAmount 以 ".0" 结尾，则去掉 ".0"
                if (halfAmount.endsWith('.0')) {
                    halfAmount = halfAmount.slice(0, -2);
                }

                configurations[3].text = `每年提取 <span style='font-size: 1.2em; font-weight: bold;'>${halfAmount} 万</span> '退休金'`;

                // 计算每月提取金额
                const monthlyAmount = ((amount * 10000) / 24).toFixed(0);
                configurations[4].text = `(每月 <span style='font-size: 1.2em; font-weight: bold;'>${monthlyAmount}</span>),提取余额持续增长`;

                updateTextBoxes();
            });

            configurations.forEach(config => {
                createTextBox(config);
            });
        };

        function updateTextBoxes() {
            const textBoxes = document.querySelectorAll('.poster-text');
            textBoxes.forEach((textBox, index) => {
                const textContent = textBox.querySelector('.poster-text-content');
                try {
                    textContent.innerHTML = configurations[index].text;
                } catch (e) {
                    //console.log(e)
                }
            });
        }

        const saveImageButton = document.getElementById('saveImageButton');
        saveImageButton.addEventListener('click', () => {
            const posterContainer = document.querySelector('.poster-container');
            const rect = posterContainer.getBoundingClientRect();

            // 使用 html2canvas 渲染 posterContainer
            html2canvas(posterContainer, {
                width: rect.width, // 使用实际宽度
                height: rect.height, // 使用实际高度
                scale: 0.5 // 降低渲染比例以减少图片大小
            }).then(canvas => {
                // 创建一个新的 canvas 用于缩小
                const scale = 1; // 缩小 20%
                const scaledCanvas = document.createElement('canvas');
                scaledCanvas.width = canvas.width * scale;
                scaledCanvas.height = canvas.height * scale;
                const ctx = scaledCanvas.getContext('2d');

                // 将原始 canvas 的内容绘制到新的缩小的 canvas 上
                ctx.drawImage(canvas, 0, 0, scaledCanvas.width, scaledCanvas.height);

                // 将缩小的 canvas 转换为图片并下载
                const link = document.createElement('a');
                link.href = scaledCanvas.toDataURL('image/png', 0.9); // 设置图片质量为80%
                link.download = 'poster.png';
                link.click();
            }).catch(err => {
                console.error('生成图片失败:', err);
                alert('生成图片失败，请查看控制台了解详情');
            });
        });
    </script>
</body>
</html> 