功能特性
- 单文件应用: 所有 HTML, CSS, 和 JavaScript 都封装在一个文件中，无需服务器，即开即用。
- 拖拽与点击上传: 支持拖拽或点击选择 PNG 图片文件，提供流畅的用户体验。
- 像素数据计算: 利用 HTML5 Canvas API 读取图像的每一个像素，计算每行、每列像素值的总和（基于灰度值和透明度）。
- 动态数据可视化: 将计算出的行列像素和数组，以条形图（投影图）的形式生动地展示出来。
- 主色调提取: 自动分析图像并提取其主色调，并将该颜色应用于数据可视化图表，使分析结果与原图风格统一。
- 专业化布局: 采用现代化、响应式的界面布局，突出核心数据，同时提供清晰的操作和信息展示区域。
如何使用
- 下载
ImagePixelAnalyzer.html文件到您的本地电脑。 - 使用现代浏览器（如 Chrome, Firefox, Edge）打开该文件。
- 在界面顶部的拖拽区域，可以直接将一张 PNG 图片拖入，或点击该区域从电脑中选择一张图片。
- 上传成功后，工具会自动进行分析，并在下方展示原始图像预览、文件信息以及行列像素和的可视化图表。
界面预览
[ 工具界面截图 ]
技术栈
- HTML5: 用于构建页面结构，并核心利用其
<canvas>元素进行图像处理。 - CSS3: 负责全部的界面样式、深色主题和基于 Flexbox 的专业布局。
- Vue.js (v2 CDN): 用于数据驱动和 DOM 的响应式更新，简化了状态管理和界面交互逻辑。
- JavaScript (ES6+): 编写所有的核心逻辑，包括文件处理、像素计算、颜色提取和 Canvas 绘图。