微信朋友圈九宫格图片生成网页代码

admin2026-05-26 12:26技术抢沙发
AI生成的代码，功能如下：可单张或多张上传图片，图片可以任意拖动变化位置，图片可以删除重传，按预览样式生成一张九宫格图片。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朋友圈九宫格拼图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        body {
            background-color: #f7f8fa;
            padding: 25px;
            max-width: 700px;
            margin: 0 auto;
        }

        .title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            font-size: 24px;
        }

        .upload-box {
            border: 2px dashed #07c160;
            border-radius: 12px;
            padding: 35px 20px;
            text-align: center;
            background: white;
            cursor: pointer;
            margin-bottom: 25px;
            transition: all 0.2s;
        }

        .upload-box:hover {
            background-color: #f9f9f9;
            border-color: #06ad56;
        }

        .upload-box.disabled {
            background: #eee;
            border-color: #ccc;
            cursor: not-allowed;
        }

        #fileInput {
            display: none;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 25px;
        }

        .grid-item {
            aspect-ratio: 1/1;
            background: #eaeaea;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: grab;
        }

        .grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            user-select: none;
        }

        /* 删除按钮样式 */
        .del-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            font-size: 16px;
            cursor: pointer;
            z-index: 10;
        }

        .del-btn:hover {
            background: rgba(255,0,0,0.8);
        }

        .btn-generate {
            width: 100%;
            padding: 16px;
            background: #07c160;
            color: white;
            font-size: 18px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-weight: bold;
        }

        .btn-generate:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .result {
            margin-top: 30px;
            text-align: center;
            display: none;
        }

        .result h3 {
            margin-bottom: 15px;
            color: #333;
        }

        /* 移除生成预览图圆角 */
        .result img {
            max-width: 100%;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-radius: 0;
        }
    </style>
</head>
<body>
<h1 class="title">朋友圈九宫格拼图</h1>

<div class="upload-box" id="uploadBox" onclick="document.getElementById('fileInput').click()">
    <p>📷 点击添加图片（剩余空位：<span id="remainNum">9</span>）</p>
    <input type="file" id="fileInput" accept="image/*" multiple>
</div>

<div class="grid-container" id="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

<button class="btn-generate" id="generateBtn" disabled>🔨 生成九宫格大图</button>

<div class="result" id="resultBox">
    <h3>✅ 生成完成！右键保存图片</h3>
    <img id="resultImg">
</div>

<script>
    const grid = document.getElementById('grid');
    const fileInput = document.getElementById('fileInput');
    const generateBtn = document.getElementById('generateBtn');
    const resultBox = document.getElementById('resultBox');
    const resultImg = document.getElementById('resultImg');
    const uploadBox = document.getElementById('uploadBox');
    const remainNum = document.getElementById('remainNum');

    let items = Array.from(grid.querySelectorAll('.grid-item'));
    let draggedIndex = -1;

    function getUsedCount() {
        let count = 0;
        items.forEach(item => { if (item.querySelector('img')) count++; });
        return count;
    }

    function updateUploadState() {
        const used = getUsedCount();
        const remain = 9 - used;
        remainNum.textContent = remain;
        uploadBox.classList.toggle('disabled', remain <= 0);
        fileInput.disabled = remain <= 0;
        generateBtn.disabled = used === 0;
    }

    // 绑定删除事件
    function bindDelEvent() {
        items.forEach(item => {
            const delBtn = item.querySelector('.del-btn');
            if(delBtn){
                delBtn.onclick = function(e){
                    e.stopPropagation(); // 阻止触发拖拽
                    item.innerHTML = '';
                    updateUploadState();
                }
            }
        });
    }

    // 分批上传图片
    fileInput.addEventListener('change', (e) => {
        const files = Array.from(e.target.files);
        if (files.length === 0) return;
        const remain = 9 - getUsedCount();
        const addFiles = files.slice(0, remain);
        
        let fileIdx = 0;
        for (let i = 0; i < items.length && fileIdx < addFiles.length; i++) {
            const item = items[i];
            if (!item.querySelector('img')) {
                const url = URL.createObjectURL(addFiles[fileIdx]);
                const img = document.createElement('img');
                img.src = url;
                // 添加删除按钮
                const delBtn = document.createElement('div');
                delBtn.className = 'del-btn';
                delBtn.textContent = '×';
                item.innerHTML = '';
                item.appendChild(img);
                item.appendChild(delBtn);
                fileIdx++;
            }
        }
        initDrag();
        bindDelEvent();
        updateUploadState();
        fileInput.value = '';
    });

    // 拖拽逻辑
    function initDrag() {
        items.forEach((item, idx) => {
            item.draggable = true;
            item.ondragstart = () => { draggedIndex = idx; };
            item.ondragover = (e) => { e.preventDefault(); };
            item.ondrop = (e) => {
                e.preventDefault();
                const targetIndex = items.indexOf(item);
                const draggedItem = items[draggedIndex];
                [draggedItem.innerHTML, item.innerHTML] = [item.innerHTML, draggedItem.innerHTML];
                bindDelEvent(); // 拖拽后重新绑定删除事件
            };
        });
    }

    // 精准复刻 object-fit: cover 裁切
    function drawCover(ctx, img, destX, destY, destW, destH) {
        const imgW = img.width;
        const imgH = img.height;
        const scale = Math.max(destW / imgW, destH / imgH);
        const srcW = destW / scale;
        const srcH = destH / scale;
        const srcX = (imgW - srcW) / 2;
        const srcY = (imgH - srcH) / 2;
        ctx.drawImage(img, srcX, srcY, srcW, srcH, destX, destY, destW, destH);
    }

    // 生成拼图
    generateBtn.onclick = async () => {
        generateBtn.textContent = '生成中...';
        generateBtn.disabled = true;

        const cell = 300;
        const gap = 10;
        const totalSize = cell * 3 + gap * 2;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = totalSize;
        canvas.height = totalSize;

        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, totalSize, totalSize);

        for (let i = 0; i < 9; i++) {
            const imgEl = items[i].querySelector('img');
            if (!imgEl) continue;

            const row = Math.floor(i / 3);
            const col = i % 3;
            const x = col * (cell + gap);
            const y = row * (cell + gap);

            const img = await new Promise(resolve => {
                const tempImg = new Image();
                tempImg.onload = () => resolve(tempImg);
                tempImg.src = imgEl.src;
            });

            drawCover(ctx, img, x, y, cell, cell);
        }

        resultImg.src = canvas.toDataURL('image/jpeg', 0.95);
        resultBox.style.display = 'block';

        generateBtn.textContent = '🔨 生成九宫格大图';
        generateBtn.disabled = false;
    };

    // 初始化
    updateUploadState();
</script>
</body>
</html>