菜单 搜索
首页 前端知识 基于 HTML、CSS 和 JavaScript 的智能九宫格图片分割系统

基于 HTML、CSS 和 JavaScript 的智能九宫格图片分割系统

2025-03-11 15:03:47 前端知识 前端哥 561 895 我要收藏

目录

1 前言

2 技术实现

2.1 HTML 结构

2.2 CSS 样式

2.3 JavaScript 交互

3 代码解析

3.1 HTML 部分

3.2 CSS 部分

3.3 JavaScript 部分

4 完整代码

5 运行结果

6 总结

6.1 系统特点

6.2 使用方法

1 前言

在当今数字化的时代，图片处理需求日益增长。无论是社交媒体分享、设计创作还是其他用途，有时候我们需要将一张图片分割成多个小块。今天，我要向大家介绍一个基于 HTML、CSS 和 JavaScript 构建的智能九宫格图片分割系统，它可以帮助你轻松地将一张图片分割成 9 个小块，并支持一键下载。

2 技术实现

2.1 HTML 结构

HTML 代码负责构建系统的整体结构，包括标题、上传区域、预览区域、按钮组和九宫格展示区域。使用语义化的标签，使代码结构清晰，易于理解和维护。

2.2 CSS 样式

CSS 代码用于美化页面，设置各个元素的样式。采用了渐变背景、阴影、圆角等效果，营造出现代感十足的界面。同时，使用弹性布局和网格布局，实现了页面的响应式设计。

2.3 JavaScript 交互

JavaScript 代码实现了系统的核心交互逻辑，包括图片上传、预览、分割和下载功能。使用 FileReader 读取用户上传的图片，使用 canvas 进行图片分割，使用 <a> 标签模拟点击下载图片。

3 代码解析

3.1 HTML 部分

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>
    <!-- 定义字符编码和响应式布局 -->
    <!-- 页面标题 -->
    <!-- 内联样式，定义页面整体样式 -->
    <style>
        /* 样式代码省略，主要定义了页面背景、容器样式、按钮样式等 */
    </style>
</head>
<body>
    <div class="container">
        <h1>(Copyright © 2025 CSDN@HNUSTer)</h1>
        <h1>智能九宫格图片分割系统</h1>
        <!-- 上传区域，可点击或拖拽图片 -->
        <div class="upload-area" id="uploadArea">
            点击上传或拖拽图片至此
            <input type="file" id="imageInput" accept="image/*" style="display: none;">
        </div>
        <!-- 图片预览区域 -->
        <img id="preview" alt="预览">
        <!-- 按钮组，包含分割和下载按钮 -->
        <div class="button-group">
            <button id="splitBtn" class="action-btn">分割图片</button>
            <button id="downloadAllBtn" class="action-btn">一键下载</button>
        </div>
        <!-- 九宫格图片展示区域 -->
        <div class="grid-container" id="gridContainer"></div>
    </div>
    <!-- 内联 JavaScript 代码，实现页面交互逻辑 -->
    <script>
        // JavaScript 代码省略
    </script>
</body>
</html>
复制
  • <meta> 标签：设置字符编码为 UTF - 8，确保中文等字符正常显示；设置视口，实现响应式布局。
  • <div class="container">：作为整个系统的容器，包含标题、上传区域、预览区域、按钮组和九宫格展示区域。
  • <div class="upload-area">：上传区域，用户可以点击或拖拽图片。内部隐藏的 <input type="file"> 用于选择文件。
  • <img id="preview">：用于预览用户上传的图片。
  • <button> 元素：分别为 “分割图片” 和 “一键下载” 按钮。
  • <div class="grid-container">：用于展示分割后的九宫格图片。

3.2 CSS 部分

CSS 代码用于美化页面，设置各个元素的样式。

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(145deg, #0f2027, #203a43, #2c5364);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
复制
  • body 样式：设置页面背景为渐变颜色，使用弹性布局将内容居中显示，设置字体和文字颜色。
.container {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 1000px;
    max-width: 90%;
    text-align: center;
    transition: transform 0.3s ease;
}
.container:hover {
    transform: translateY(-5px);
}
复制
  • .container 样式：设置容器的背景、内边距、圆角、阴影等样式，添加鼠标悬停效果。
.upload-area {
    margin: 30px 0;
    padding: 40px;
    border: 3px dashed rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}
.upload-area:hover {
    border-color: #00ddeb;
    background: rgba(255, 255, 255, 0.1);
}
.upload-area.dragover {
    border-color: #00ddeb;
    background: rgba(0, 221, 235, 0.2);
}
复制
  • .upload - area 样式：设置上传区域的样式，包括边框、背景、鼠标悬停和拖拽效果。
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 30px;
    display: none;
}
.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}
.grid-item:hover {
    transform: scale(1.05);
}
.grid-item img {
    width: 100%;
    height: auto;
    display: block;
}
复制
  • .grid - container 样式：使用网格布局，将分割后的图片展示为 3x3 的九宫格。
  • .grid - item 样式：设置每个网格项的样式，包括圆角、阴影和鼠标悬停效果。

3.3 JavaScript 部分

JavaScript 代码实现了页面的交互逻辑，包括图片上传、预览、分割和下载功能。

const uploadArea = document.getElementById('uploadArea');
const imageInput = document.getElementById('imageInput');
const preview = document.getElementById('preview');
const splitBtn = document.getElementById('splitBtn');
const downloadAllBtn = document.getElementById('downloadAllBtn');
const gridContainer = document.getElementById('gridContainer');
let originalImage = null;
let tiles = [];
复制
  • 定义变量：获取页面上的各个元素，初始化原始图片和分割后的图片数组。
// 上传区域点击事件
uploadArea.addEventListener('click', () => imageInput.click());
 
// 拖拽事件
uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => {
    uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    const file = e.dataTransfer.files[0];
    handleImage(file);
});
 
// 文件选择事件
imageInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    handleImage(file);
});
复制
  • 事件监听：为上传区域添加点击、拖拽和文件选择事件，调用 handleImage 函数处理图片。
// 处理图片
function handleImage(file) {
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = (e) => {
            preview.src = e.target.result;
            preview.style.display = 'block';
            splitBtn.style.display = 'block';
            downloadAllBtn.style.display = 'none';
            gridContainer.style.display = 'none';
            originalImage = new Image();
            originalImage.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
}
复制
  • handleImage 函数：使用 FileReader 读取用户上传的图片，将图片显示在预览区域，显示 “分割图片” 按钮。
// 分割图片
splitBtn.addEventListener('click', () => {
    if (!originalImage) return;
 
    gridContainer.innerHTML = '';
    gridContainer.style.display = 'grid';
    tiles = [];
 
    const width = originalImage.width;
    const height = originalImage.height;
    const tileWidth = width / 3;
    const tileHeight = height / 3;
 
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            const canvas = document.createElement('canvas');
            canvas.width = tileWidth;
            canvas.height = tileHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(
                originalImage,
                j * tileWidth,
                i * tileHeight,
                tileWidth,
                tileHeight,
                0,
                0,
                tileWidth,
                tileHeight
            );
 
            const img = document.createElement('img');
            img.src = canvas.toDataURL('image/png');
            tiles.push({ src: img.src, row: i, col: j });
 
            const gridItem = document.createElement('div');
            gridItem.className = 'grid-item';
            gridItem.appendChild(img);
            gridContainer.appendChild(gridItem);
        }
    }
    downloadAllBtn.style.display = 'block';
});
复制
  • “分割图片” 按钮点击事件：将原始图片分割成 9 个小块，使用 canvas 绘制每个小块，将小块图片添加到九宫格展示区域，并显示 “一键下载” 按钮。
// 一键下载所有图片
downloadAllBtn.addEventListener('click', () => {
    tiles.forEach((tile, index) => {
        setTimeout(() => {
            const link = document.createElement('a');
            link.href = tile.src;
            link.download = `tile_${tile.row}_${tile.col}.png`;
            link.click();
        }, index * 100); // 添加短暂延迟避免浏览器限制
    });
});
复制
  • “一键下载” 按钮点击事件：遍历分割后的图片数组，使用 <a> 标签模拟点击下载每个小块图片，添加短暂延迟避免浏览器限制。

4 完整代码

<!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>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(145deg, #0f2027, #203a43, #2c5364);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
        .container {
            background: rgba(255, 255, 255, 0.05);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            width: 1000px;
            max-width: 90%;
            text-align: center;
            transition: transform 0.3s ease;
        }
        .container:hover {
            transform: translateY(-5px);
        }
        h1 {
            font-size: 3em;
            margin-bottom: 30px;
            color: #ffffff;
            text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
            letter-spacing: 2px;
        }
        .upload-area {
            margin: 30px 0;
            padding: 40px;
            border: 3px dashed rgba(255, 255, 255, 0.5);
            border-radius: 15px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.03);
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #00ddeb;
            background: rgba(255, 255, 255, 0.1);
        }
        .upload-area.dragover {
            border-color: #00ddeb;
            background: rgba(0, 221, 235, 0.2);
        }
        #preview {
            max-width: 400px;
            max-height: 400px;
            margin: 20px auto;
            border-radius: 10px;
            display: none;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 30px;
            display: none;
        }
        .grid-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }
        .grid-item:hover {
            transform: scale(1.05);
        }
        .grid-item img {
            width: 100%;
            height: auto;
            display: block;
        }
        .button-group {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        .action-btn {
            padding: 15px 40px;
            border: none;
            border-radius: 50px;
            font-size: 1.2em;
            cursor: pointer;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        #splitBtn {
            background: linear-gradient(90deg, #ff416c, #ff4b2b);
            display: none;
        }
        #splitBtn:hover {
            background: linear-gradient(90deg, #ff5a7f, #ff6947);
            transform: translateY(-3px);
        }
        #downloadAllBtn {
            background: linear-gradient(90deg, #00c6ff, #0072ff);
            display: none;
        }
        #downloadAllBtn:hover {
            background: linear-gradient(90deg, #00ddeb, #0095ff);
            transform: translateY(-3px);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>(Copyright © 2025 CSDN@HNUSTer)</h1>
        <h1>智能九宫格图片分割系统</h1>
        <div class="upload-area" id="uploadArea">
            点击上传或拖拽图片至此
            <input type="file" id="imageInput" accept="image/*" style="display: none;">
        </div>
        <img id="preview" alt="预览">
        <div class="button-group">
            <button id="splitBtn" class="action-btn">分割图片</button>
            <button id="downloadAllBtn" class="action-btn">一键下载</button>
        </div>
        <div class="grid-container" id="gridContainer"></div>
    </div>
 
    <script>
        const uploadArea = document.getElementById('uploadArea');
        const imageInput = document.getElementById('imageInput');
        const preview = document.getElementById('preview');
        const splitBtn = document.getElementById('splitBtn');
        const downloadAllBtn = document.getElementById('downloadAllBtn');
        const gridContainer = document.getElementById('gridContainer');
        let originalImage = null;
        let tiles = [];
 
        // 上传区域点击事件
        uploadArea.addEventListener('click', () => imageInput.click());
        
        // 拖拽事件
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const file = e.dataTransfer.files[0];
            handleImage(file);
        });
 
        // 文件选择事件
        imageInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            handleImage(file);
        });
 
        // 处理图片
        function handleImage(file) {
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    splitBtn.style.display = 'block';
                    downloadAllBtn.style.display = 'none';
                    gridContainer.style.display = 'none';
                    originalImage = new Image();
                    originalImage.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }
 
        // 分割图片
        splitBtn.addEventListener('click', () => {
            if (!originalImage) return;
 
            gridContainer.innerHTML = '';
            gridContainer.style.display = 'grid';
            tiles = [];
 
            const width = originalImage.width;
            const height = originalImage.height;
            const tileWidth = width / 3;
            const tileHeight = height / 3;
 
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    const canvas = document.createElement('canvas');
                    canvas.width = tileWidth;
                    canvas.height = tileHeight;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(
                        originalImage,
                        j * tileWidth,
                        i * tileHeight,
                        tileWidth,
                        tileHeight,
                        0,
                        0,
                        tileWidth,
                        tileHeight
                    );
 
                    const img = document.createElement('img');
                    img.src = canvas.toDataURL('image/png');
                    tiles.push({ src: img.src, row: i, col: j });
 
                    const gridItem = document.createElement('div');
                    gridItem.className = 'grid-item';
                    gridItem.appendChild(img);
                    gridContainer.appendChild(gridItem);
                }
            }
            downloadAllBtn.style.display = 'block';
        });
 
        // 一键下载所有图片
        downloadAllBtn.addEventListener('click', () => {
            tiles.forEach((tile, index) => {
                setTimeout(() => {
                    const link = document.createElement('a');
                    link.href = tile.src;
                    link.download = `tile_${tile.row}_${tile.col}.png`;
                    link.click();
                }, index * 100); // 添加短暂延迟避免浏览器限制
            });
        });
    </script>
</body>
</html>
复制

5 运行结果

主界面
转载请注明出处或者链接地址：https://www.qianduange.cn//article/23288.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

Spring Boot面试问答

2025-03-13 15:03:01

vue左侧边框点击后让字体高亮

2025-03-13 15:03:01

刚刚！微调 DeepSeek 满血版正式开源。。。

2025-03-13 15:03:58

vue调整表格样式之深度修改

2025-03-13 15:03:57

vuejs 组件基础 路由

2025-03-13 15:03:57

STM32之I2C硬件外设

2025-03-13 15:03:51

【Spring Data】

2025-03-13 15:03:51

大学至今的反思与总结

2025-03-13 15:03:50

解锁DeepSpeek-R1大模型微调：从训练到部署，打造定制化AI会话系统

2025-03-13 15:03:50

2024华为OD机试真题-日志排序(C /Java/Python)-E卷-100分

2025-03-13 15:03:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！