UD5工具箱
圆形头像术语表
圆形裁剪（Circle Crop）
一种图像处理技术，将矩形图片按照指定的圆形路径进行裁剪，只保留圆形区域内的像素，将圆形区域外的像素设置为透明。圆形裁剪是制作圆形头像的核心操作，通过Canvas API的clip path功能实现精确的圆形区域裁剪。圆形裁剪后的图片在支持透明背景的平台上显示时，会呈现出完美的圆形效果。
透明背景（Transparent Background）
图片中不包含任何颜色信息的区域，通常用Alpha通道值为0表示。透明背景意味着图片的某些区域是「空的」，当图片叠加在其他背景上时，底层内容会透过透明区域显示出来。在圆形头像中，圆形区域外的像素被设置为透明，使得头像在任何背景色上都能呈现完美的圆形效果，而不会出现白色或黑色的方角背景。
Alpha通道（Alpha Channel）
图像中存储每个像素透明度信息的数据通道。Alpha通道值范围通常为0（完全透明）到255（完全不透明）。PNG格式支持Alpha通道，因此能够保存透明背景信息。在制作圆形头像时，圆形区域外的像素Alpha值被设为0（完全透明），圆形区域内的像素Alpha值保持255（完全不透明），从而实现精确的圆形裁剪效果。
Canvas API
HTML5标准提供的浏览器原生图形绘制接口，允许通过JavaScript在网页上直接进行像素级的图形操作。在圆形头像生成器中，Canvas API负责将图片绘制到画布上、执行圆形裁剪路径、处理缩放和位移变换、以及导出最终的PNG格式图片。Canvas API的最大优势是所有操作均在浏览器本地完成，无需服务器参与，保障数据安全。
裁剪路径（Clip Path）
Canvas API中用于定义可见区域的功能。通过设置裁剪路径，只有路径内部的像素会被渲染显示，路径外部的像素会被隐藏（设置为透明）。在圆形头像生成器中，使用arc()方法绘制一个圆形路径，然后调用clip()方法将该路径设为裁剪区域，从而实现圆形裁剪效果。裁剪路径是实现非矩形图片裁剪的核心技术。
PNG格式（Portable Network Graphics）
一种无损压缩的位图图片格式，支持Alpha通道（透明背景）。PNG格式是制作圆形头像的理想输出格式，因为它能够完美保留圆形裁剪后的透明背景信息。与JPG格式不同，PNG格式不会因为压缩而损失画质，也不会丢失透明度信息。生成的圆形头像以PNG格式保存后，可以直接上传到各种支持透明背景的平台使用。
图像缩放（Image Scaling）
改变图像显示尺寸的技术。在圆形头像制作中，缩放功能允许用户调整原始图片在圆形裁剪区域内的显示大小。缩放通过Canvas API的变换矩阵（transform）实现，可以等比例放大或缩小图片。放大图片可以聚焦于特定区域（如面部），缩小图片可以展示更多内容。缩放操作不会改变原始图片的像素数据，仅影响裁剪效果。
像素密度（Pixel Density / DPI）
单位长度内的像素数量，通常以DPI（每英寸点数）或PPI（每英寸像素数）表示。在头像制作中，输出尺寸（如256×256像素）决定了图片的像素数量，而像素密度影响图片在不同显示设备上的清晰度。高像素密度的头像在高分辨率屏幕（如Retina显示屏）上显示时更加清晰锐利。选择合适的输出尺寸是平衡清晰度和文件大小的关键。