【CodeBuddy】三分钟开发一个实用小功能之：九宫格图片切割&生成器

原创

Jimaks

修改于 2025-05-25 01:12:42

1170

文章被收录于专栏：人工智能人工智能

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

前言

我需要开发一个九宫格图片处理工具，这个工具要具备图片切割和合成两种模式，同时还得有良好的用户界面和便捷的下载功能。时间紧迫，我自己从头开始开发可能会耗费大量精力且容易出错。于是，我想到了借助 AI 编程的力量，与 CodeBuddy 进行了一次深入的沟通。我详细地向它描述了我的需求，包括功能要求、界面设计的大致方向等，没想到 CodeBuddy 很快就给出了完整的解决方案，这让我对 AI 编程的魅力有了更深刻的认识。

以下是实际操作中的开发界面与最终呈现效果(文末附完整代码)：

bandicam 2025-05-22 11-42-42-484 00_00_00-00_00_30~1.gif

应用场景

这个九宫格图片工具的应用场景非常广泛。在社交媒体领域，用户可以将一张精美的图片切割成九宫格，然后依次发布到朋友圈或其他社交平台，增加图片的趣味性和吸引力。对于电商从业者来说，合成模式可以将九张小图合成一张大图，用于产品展示页面，使产品信息更加集中和直观。此外，在设计行业，设计师可以利用这个工具快速对图片进行处理和排版，提高工作效率。

核心功能

CodeBuddy 生成的这个九宫格图片工具具备两大核心功能。一是图片切割功能，用户只需上传一张图片，选择切割模式，工具就能自动将图片切割成九宫格，并在界面上展示出来。用户还可以点击每个小格子单独下载，也可以一键下载所有切割后的图片。二是图片合成功能，当用户选择合成模式时，上传九张图片，工具会迅速将它们合成为一张大图，同样支持下载操作。这两个功能简单易用，大大节省了用户处理图片的时间和精力。

代码可以优化升级的地方

尽管 CodeBuddy 生成的代码已经能够很好地实现基本功能，但仍有一些可以优化升级的地方。在用户体验方面，可以增加更多的提示信息，比如在上传图片时，除了提示图片数量不符合要求，还可以给出更详细的操作指引。在性能方面，可以对图片加载和处理的速度进行优化，特别是在合成模式下，当图片数量较多时，可能会出现加载缓慢的情况，可以采用更高效的算法来提高处理速度。另外，还可以增加一些扩展功能，如调整切割或合成图片的尺寸、添加水印等，以满足不同用户的个性化需求。

总结感悟

CodeBuddy 就像一个智能的编程助手，能够理解开发者的需求，并提供高质量的解决方案。同时，AI 编程也为软件开发带来了更多的可能性，让开发者可以将更多的精力放在创新和优化上。当然，目前的 AI 编程还存在一些不足之处，但随着技术的不断发展，相信它会越来越强大，为软件开发领域带来更多的惊喜。

与其在琐碎的代码工具间反复横跳，不如让 CodeBuddy 重构你的开发动线！当场景化需求出现时，直接唤醒「CodeBuddy」的 Craft模式：用口语化指令触发精准代码生成，获得开箱即用的函数级解决方案。

—— 你的需求，它的战场。⏱️

附：

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格图片工具</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>九宫格图片工具</h1>
        
        <div class="mode-selector">
            <label>
                <input type="radio" name="mode" value="split" checked> 切割模式
            </label>
            <label>
                <input type="radio" name="mode" value="combine"> 合成模式
            </label>
        </div>
        
        <div class="upload-area">
            <input type="file" id="imageInput" accept="image/*" multiple>
            <label for="imageInput" class="upload-btn">选择图片</label>
            <div class="preview-container hidden">
                <canvas id="previewCanvas"></canvas>
            </div>
        </div>

        <div class="grid-container hidden">
            <div class="grid" id="grid"></div>
            <button id="downloadAll" class="download-btn">下载结果</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

style.css

:root {
    --primary-color: #6c5ce7;
    --secondary-color: #a29bfe;
    --dark-color: #2d3436;
    --light-color: #f5f6fa;
    --success-color: #00b894;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--dark-color), #1e272e);
    color: var(--light-color);
    min-height: 100vh;
    overflow: auto;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
}

h1 {
    text-align: center;
    margin: 1rem 0;
    font-weight: 300;
    font-size: 2rem;
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mode-selector {
    margin: 1rem 0;
    display: flex;
    gap: 1rem;
}

.mode-selector label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.upload-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

#imageInput {
    display: none;
}

.upload-btn {
    padding: 0.8rem 1.5rem;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
}

.upload-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.preview-container {
    margin-top: 1rem;
    width: 300px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}

#previewCanvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.grid-container {
    width: 100%;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 500px;
    height: 500px;
    margin-bottom: 1rem;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.grid-item:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.grid-item canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-btn {
    padding: 0.8rem 1.5rem;
    background-color: var(--success-color);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background-color: #00a884;
    transform: translateY(-2px);
}

.hidden {
    display: none !important;
}

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

.loading {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid var(--primary-color);
    animation: spin 1s linear infinite;
    margin: 1rem auto;
}

/* 响应式调整 */
@media (max-width: 600px) {
    .grid {
        width: 300px;
        height: 300px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
}

script.js

document.addEventListener('DOMContentLoaded', () => {
    // DOM元素
    const imageInput = document.getElementById('imageInput');
    const previewContainer = document.querySelector('.preview-container');
    const previewCanvas = document.getElementById('previewCanvas');
    const gridContainer = document.querySelector('.grid-container');
    const grid = document.getElementById('grid');
    const downloadAllBtn = document.getElementById('downloadAll');
    const modeRadios = document.querySelectorAll('input[name="mode"]');
    
    // 全局变量
    let gridItems = [];
    let currentMode = 'split';
    const ctx = previewCanvas.getContext('2d');
    
    // 事件监听 - 只保留必要的change事件
    imageInput.addEventListener('change', handleImageUpload);
    downloadAllBtn.addEventListener('click', downloadAllGridItems);
    modeRadios.forEach(radio => {
        radio.addEventListener('change', (e) => {
            currentMode = e.target.value;
            resetUI();
        });
    });
    
    // 重置UI状态
    function resetUI() {
        grid.innerHTML = '';
        gridItems = [];
        previewContainer.classList.add('hidden');
        gridContainer.classList.add('hidden');
        imageInput.value = '';
    }
    
    // 处理图片上传
    function handleImageUpload(e) {
        const files = Array.from(e.target.files);
        if (!files.length) return;
        
        if (files.some(file => !file.type.match('image.*'))) {
            alert('请选择有效的图片文件');
            return;
        }
        
        if (currentMode === 'split') {
            if (files.length > 1) {
                alert('切割模式只需上传一张图片');
                return;
            }
            processSplitMode(files[0]);
        } else {
            if (files.length !== 9) {
                alert('合成模式需要上传9张图片');
                return;
            }
            processCombineMode(files);
        }
    }
    
    // 处理切割模式
    function processSplitMode(file) {
        const reader = new FileReader();
        
        reader.onload = function(event) {
            const img = new Image();
            img.onload = function() {
                previewContainer.classList.remove('hidden');
                drawImageToCanvas(img, previewCanvas);
                createImageGrid(img);
                gridContainer.classList.remove('hidden');
            };
            img.src = event.target.result;
        };
        
        reader.readAsDataURL(file);
    }
    
    // 处理合成模式
    function processCombineMode(files) {
        const readers = files.map(file => {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = e => resolve(e.target.result);
                reader.onerror = reject;
                reader.readAsDataURL(file);
            });
        });
        
        Promise.all(readers)
            .then(results => {
                const images = results.map(src => {
                    const img = new Image();
                    return new Promise(resolve => {
                        img.onload = () => resolve(img);
                        img.src = src;
                    });
                });
                return Promise.all(images);
            })
            .then(images => {
                combineImages(images);
                gridContainer.classList.remove('hidden');
            })
            .catch(() => {
                alert('图片加载失败');
            });
    }
    
    // 合成图片
    function combineImages(images) {
        if (images.length !== 9) return;
        
        const cellWidth = images[0].width;
        const cellHeight = images[0].height;
        const combinedWidth = cellWidth * 3;
        const combinedHeight = cellHeight * 3;
        
        const combinedCanvas = document.createElement('canvas');
        combinedCanvas.width = combinedWidth;
        combinedCanvas.height = combinedHeight;
        const combinedCtx = combinedCanvas.getContext('2d');
        
        for (let i = 0; i < 9; i++) {
            const row = Math.floor(i / 3);
            const col = i % 3;
            combinedCtx.drawImage(
                images[i],
                col * cellWidth,
                row * cellHeight,
                cellWidth,
                cellHeight
            );
        }
        
        grid.innerHTML = '';
        const gridItem = document.createElement('div');
        gridItem.className = 'grid-item combined-item';
        
        const previewCanvas = document.createElement('canvas');
        previewCanvas.width = 500;
        previewCanvas.height = 500;
        const previewCtx = previewCanvas.getContext('2d');
        
        const ratio = Math.min(
            previewCanvas.width / combinedWidth,
            previewCanvas.height / combinedHeight
        );
        const width = combinedWidth * ratio;
        const height = combinedHeight * ratio;
        
        previewCtx.drawImage(combinedCanvas, 0, 0, width, height);
        
        gridItem.appendChild(previewCanvas);
        grid.appendChild(gridItem);
        
        gridItems = [combinedCanvas];
    }
    
    // 将图片绘制到Canvas
    function drawImageToCanvas(img, canvas) {
        const ratio = Math.min(
            canvas.width / img.width,
            canvas.height / img.height
        );
        const width = img.width * ratio;
        const height = img.height * ratio;
        
        canvas.width = width;
        canvas.height = height;
        
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, width, height);
    }
    
    // 创建九宫格
    function createImageGrid(img) {
        grid.innerHTML = '';
        gridItems = [];
        
        const rows = 3;
        const cols = 3;
        const itemWidth = img.width / cols;
        const itemHeight = img.height / rows;
        
        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < cols; col++) {
                const gridItem = document.createElement('div');
                gridItem.className = 'grid-item';
                
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                
                canvas.width = itemWidth;
                canvas.height = itemHeight;
                
                ctx.drawImage(
                    img,
                    col * itemWidth, row * itemHeight,
                    itemWidth, itemHeight,
                    0, 0,
                    itemWidth, itemHeight
                );
                
                canvas.addEventListener('click', () => {
                    downloadImage(canvas, `grid-${row}-${col}.png`);
                });
                
                gridItem.appendChild(canvas);
                grid.appendChild(gridItem);
                gridItems.push(canvas);
            }
        }
    }
    
    // 下载单个图片
    function downloadImage(canvas, filename) {
        const link = document.createElement('a');
        link.download = filename;
        link.href = canvas.toDataURL('image/png');
        link.click();
    }
    
    // 下载全部格子
    function downloadAllGridItems() {
        if (!gridItems.length) return;
        
        if (currentMode === 'split') {
            gridItems.forEach((canvas, index) => {
                setTimeout(() => {
                    downloadImage(canvas, `grid-part-${index + 1}.png`);
                }, index * 300);
            });
        } else {
            downloadImage(gridItems[0], 'combined-image.png');
        }
    }
});