Pixel Perfect - AI Art Converter最新版

AI 生成的像素艺术越来越受欢迎，但现有的解决方案往往存在不足，例如生成的图像过大、缺乏精度，或者不适合用作游戏资产。为了解决这些问题，Pixel Perfect - AI 艺术转换器应运而生。它通过以下功能，帮助用户生成真正“像素完美”的艺术作品：

• 定义自定义网格尺寸：根据项目需求，精确设置像素尺寸。
• 精确定位和缩放图像：调整图像的放置和缩放级别，确保每个网格单元都能捕捉到细节。
• 多种转换方法可选：提供多种转换算法，包括主导颜色、平均混合和邻域感知方法，满足不同的创意需求。

这种灵活的操作方式，使得生成符合游戏资产和其他专业应用需求的像素艺术变得更加简单。

使用指南

步骤 1：设置

1. 选择画布大小：通过宽度和高度下拉菜单，选择所需的画布尺寸。
2. 上传图像：使用文件输入功能加载源图像。图像会在离屏画布上进行处理。
3. 进入下一步：点击“上传（下一步）”按钮，相关代码会处理图像加载并设置预览。

步骤 2：定位和转换

1. 调整网格单元大小和图像缩放：
   • 网格单元大小：通过“预览大小”滑块调整预览单元的大小。
   • 图像缩放：使用“缩放”滑块调整图像大小，根据需要重新计算偏移量和缩放比例。
2. 定位图像：在画布上拖动图像，确保每个网格单元代表您要转换的区域。
3. 选择转换方法：
   • 最常用颜色：查找每个单元格中的主导颜色。
   • 最常用颜色（优先考虑亮/暗）：根据亮度权重选择颜色。
   • 平均颜色：通过平均 RGB 值获得平滑结果。
   • 邻域颜色：采样稍大的区域，产生混合颜色效果。
   • 转换方法在 JavaScript 代码的 getRepresentativeColor 和 getRepresentativeColorWeighted 等函数中实现。
4. 生成像素艺术：点击“转换（下一步）”按钮处理图像，生成的像素艺术将存储在数组中，供进一步编辑。

步骤 3：编辑和导出

1. 编辑工具：
   • 画笔：使用选定的颜色绘制。
   • 橡皮擦：通过替换为透明像素来移除颜色。
   • 魔术棒：使用洪水填充算法清除相同颜色的连续区域。
   • 工具功能通过事件侦听器和 handleDrawing、floodFill 等函数管理。
2. 画布缩放和网格切换：
   • 使用“画布缩放”滑块调整视图。
   • 切换网格线，以便更清晰地查看单个单元格。
3. 导出作品：使用导出按钮将像素艺术保存为 PNG 格式，图像会按您选择的比例生成并可供下载。

安装

无需复杂安装，只需下载文件夹并解压到计算机上的任意位置。直接在浏览器中打开名为“index.html”的文件即可开始使用。该工具专为在浏览器中运行而设计，无需本地环境配置。

快捷键

• Ctrl+Z：撤销步骤 3 中的操作。
• Ctrl+Y：重做步骤 3 中的操作。
• Alt+B：在浅色和深色背景之间切换。

转换方法

每种转换方法都会分析源图像区域的像素数据，并确定每个网格单元的代表性颜色。以下是主要方法的详细说明：

1. 最常用颜色

• 概述：计算网格单元中每种颜色的频率，选择最常见的颜色。
• 工作原理：
  • 使用离屏画布的 getImageData 获取图像数据。
  • 遍历像素数据（每 4 步处理一个像素，包括 R、G、B 和 A 通道）。
  • 跳过完全透明的像素（alpha = 0）。
  • 统计每种颜色的频率，并选择频率最高的颜色作为代表性颜色。

2. 最常用颜色（优先考虑亮/暗）

• 概述：根据像素亮度（优先考虑较浅或较深的阴影）对像素进行加权，调整颜色选择。
• 工作原理：
  • 计算每个像素的亮度（例如，使用公式 0.299*r + 0.587*g + 0.114*b）。
  • 根据亮度值为像素分配权重，强调高亮度或低亮度。
  • 根据颜色相似度对像素分组，并计算加权平均值。
  • 选择总加权值最高的组作为代表性颜色。
• 辅助函数：getRepresentativeColorWeighted 负责这些计算。

3. 平均颜色

• 概述：计算单元格中所有非透明像素的平均颜色，产生平滑混合效果。
• 工作原理：
  • 获取相关区域的图像数据。
  • 对所有有效像素的 RGB 值求和，然后分别除以有效像素数量，得到平均值。

4. 邻域颜色

• 概述：通过对单元格周围稍大的区域进行采样，增强平均颜色方法。
• 工作原理：
  • 扩展单元格边界，包括相邻像素。
  • 从扩展区域收集图像数据，并计算平均颜色。
  • 这种方法允许相邻像素影响最终颜色，使结果更加混合和统一。

所有转换方法都集成在 script.js 的转换事件侦听器中，处理每个网格单元的像素数据，更新 pixelColors 数组，并最终在画布上渲染像素艺术，供用户编辑和导出。