Image Triangulator 全攻略：从入门到精通
Image Triangulator 是一个基于网页的、功能强大的图像处理工具，它允许你通过在图片上放置点来创建由三角形组成的艺术效果，这种效果在视觉上既复古又现代，常用于网页设计、数据可视化和创意艺术项目中。
本教程将分为以下几个部分：
- 简介：什么是 Image Triangulator？
- 第一步：打开网站与基本界面
- 第二步：核心操作 - 放置点
- 第三步：调整与美化
- 第四步：导出你的作品
- 高级技巧与最佳实践
- 常见问题解答
简介：什么是 Image Triangulator？
Image Triangulator 的核心原理是 Delaunay 三角剖分，你只需要在图片上放置一系列的点（称为“顶点”），程序会自动将这些点连接成一系列三角形，每个三角形都会填充其对应区域图片的平均颜色。
最终效果取决于你放置点的数量、位置和密度，点越多，细节越丰富；点越少，风格感越强。
第一步：打开网站与基本界面
访问网站： 直接在浏览器中打开 https://image-triangulator.appspot.com/，无需注册或安装，非常方便。
界面布局： 打开后，你会看到一个简洁的界面，主要分为几个区域：
- 中央画布： 这里是你上传和编辑图片的主要区域。
- 左侧工具栏： 包含了所有核心的编辑工具。
- 右侧控制面板： 用于调整全局参数，如颜色、线条、导出选项等。
- 顶部菜单栏： 包含文件操作（上传、清空等）和帮助信息。
第二步：核心操作 - 放置点
这是整个流程中最关键的一步。
A. 上传图片 点击顶部菜单栏的 "File" -> "Open Image..."，选择你想要处理的图片文件，图片会自动加载到中央画布上。
B. 放置顶点
- 在左侧工具栏中,选择 "Add Point" 工具（通常是一个带加号的圆点图标）。
- 在你的图片上点击,你想要的地方就会出现一个点，这就是一个顶点。
- 继续点击,放置更多的点，每放置一个点，程序都会实时重新计算并更新三角剖分。
C. 删除顶点
- 在左侧工具栏中,选择 "Delete Point" 工具（通常是一个带减号的圆点图标）。
- 将鼠标移动到你想要删除的点上,点击即可删除它，同样，三角剖分会实时更新。
D. 移动顶点
- 在左侧工具栏中,选择 "Move Point" 工具（通常是一个四向箭头图标）。
- 点击并按住任何一个顶点,你可以拖动它到新的位置，松开鼠标后，三角剖分会根据新位置重新计算。
小技巧：
- 从关键特征开始： 先在图片中最重要的轮廓线、边缘或颜色分界处放置点，人脸的五官轮廓、建筑的边缘、物体的边界等。
- 密度控制： 在颜色变化剧烈的区域（如头发、阴影），放置更密集的点；在颜色平滑的区域（如天空、纯色背景），放置稀疏的点，这样可以有效控制文件大小和视觉细节。
- 善用撤销： 如果不小心放错了点，可以随时使用
Ctrl+Z(Windows) 或Cmd+Z(Mac) 来撤销操作。
第三步：调整与美化
当对点的位置满意后,就可以通过右侧的控制面板来调整最终效果了。
A. 调整线条
- Line Width: 调整三角形边框的粗细，设置为 0 可以隐藏所有线条，只保留填充色块。
- Line Color: 设置三角形边框的颜色，你可以选择纯色（如白色、黑色）或使用一个颜色采样器从图片中取色。
B. 调整填充
- Fill Opacity: 调整三角形填充色的不透明度，降低不透明度可以让底层的图片透出来，创造出独特的混合效果。
- Show Original Image: 这是一个开关，开启时，会显示原始图片作为背景；关闭时，只显示三角剖分后的效果，通常在编辑时保持开启，导出前根据需要关闭。
C. 高级选项
- Point Size: 调整顶点在画布上显示的大小，这不会影响最终导出的图片。
- Delaunay Edge Color: 控制Delaunay边（即连接顶点的线）的颜色，与
Line Color类似。 - Voronoi Diagram: 这是一个非常酷的功能，勾选此项后，除了Delaunay三角剖分，还会显示 Voronoi 图，Voronoi 图中的每个区域都包含一个顶点，该区域内的任何一点到这个顶点的距离都比到其他顶点的距离更近，这会产生一种马赛克或细胞状的视觉效果，与三角剖分结合使用效果极佳。
实时预览： 所有的调整都会在画布上实时反映，让你可以立即看到效果并进行微调。
第四步：导出你的作品
当你对最终效果满意后,就可以导出了。
A. 导出为图片
- 点击顶部菜单栏的 "File"。
- 选择 "Save as Image..."。
- 在弹出的对话框中,你可以选择导出的格式（通常是 PNG，因为它支持透明背景）。
- 点击 "Save"，你的艺术作品就会被下载到本地。
B. 导出为 SVG 矢量图 这是一个更强大的功能，尤其适合设计师。
- 点击顶部菜单栏的 "File"。
- 选择 "Save as SVG..."。
- SVG 是一种矢量图形格式，意味着你可以无限放大它而不会失真，你可以在 Adobe Illustrator、Inkscape 或其他矢量编辑软件中进一步编辑，比如修改颜色、添加文字、调整线条样式等。
C. 导出数据 你也可以选择导出点的坐标数据，以便在其他程序中重新生成三角剖分。
高级技巧与最佳实践
- 混合模式： 在导出为图片后，将图层叠加模式（在 Photoshop 等软件中）设置为 "Multiply"（正片叠底）、"Screen"（滤色）或 "Overlay"（叠加），可以创造出更丰富的色彩和光影效果。
- 双层叠加： 创建两个或更多层级的三角剖分。
- 底层： 使用较少的点，创建大块的、风格化的色块。
- 上层： 使用较多的点，创建细节丰富的线条或纹理。
- 将上层设置为较低的透明度,然后叠加在底层之上，可以创造出深度和层次感。
- 手动引导： 在放置点时，有意识地引导线条的方向，使其与图片中的主要纹理或运动方向一致（如头发的流向、河流的走向），能让作品更具动感和艺术性。
- 非对称美： 不要追求完美的对称，有时，稍微不对称的点分布会产生更有趣、更自然的视觉效果。
常见问题解答
Q: 如何处理高分辨率图片？ A: Image Triangulator 可以处理较大分辨率的图片，但如果图片非常大（如超过 4000px 宽），可能会导致网页卡顿，建议先将图片在 Photoshop 等软件中适当缩小到合适尺寸（如 2000px 宽）再进行处理，处理完成后再导出为高分辨率图片。
Q: 为什么我放置的点很少，但生成的三角形却很密集？ A: 这是因为 Delaunay 三角剖分算法会自动连接所有点，形成一套完整的三角形网格，点的密度决定了三角形的“大小”和“数量”，而不是你点的“疏密感”，要获得稀疏的效果，就需要减少点的总数量。
Q: 可以在透明背景的 PNG 图片上操作吗？ A: 可以，上传透明背景的 PNG 图片后，放置点并进行导出，导出的 PNG 图片也会保留透明背景区域（即没有图片覆盖的区域）。
