Image Boxing

图片加框工具可为图片添加各种样式的边框（boxing），包括设置边距背景色、内边距、边框颜色和宽度、阴影效果，以及圆角处理。这个工具帮助开发者和设计师在不打开专业设计软件的情况下为图片快速添加装饰性边框，适用于社交媒体配图、产品展示图、头像装饰等场景。

图片加框在内容展示场景中使用频繁：电商网站为商品列表项添加统一的白底边框、社交媒体用户为头像添加圆形边框效果、博客文章为配图添加带阴影的卡片式边框、以及移动端应用为图标添统一的圆角容器样式。它也是前端开发者实现图片占位和加载骨架的重要参考设计。

加框后的图片可通过 图片格式转换器 导出为不同格式。图片裁剪器 可在加框前调整图片构图。图片压缩器 可优化加框后的文件大小。调色板生成器 可帮助选择边框色彩。

图片加框在 Canvas 上通过多层绘制实现：首先创建包含边距（margin）和背景色的外层画布，计算内容区域的偏移量，将原图 drawImage 到计算好的位置，然后在图片与边距之间使用 box-shadow 模拟（通过绘制带模糊的矩形）。圆角通过 Canvas 的 clip 路径实现，使用 arcTo 或贝塞尔曲线绘制圆角矩形裁剪区域，之后所有绘制操作限制在裁剪区域内。

• 阴影裁剪：圆角矩形加阴影时，阴影可能被裁剪区域切掉。需要在外层画布先绘制阴影，再裁剪内层区域。
• 边距溢出：加框会增加图片的整体尺寸，如果对输出尺寸有要求，需考虑边距和边框宽度的累加效应。
• 分辨率保持：加框操作应保持原图分辨率不变。如果图片本身很小，加框后的结果需要按比例缩放以避免模糊。
• 透明背景：如果原图包含透明区域，加不透明边距后透明区域被填充，可能导致输出效果不符合预期。

在快速为图片添加装饰性边框、准备社交媒体配图或创建产品展示图时使用此工具。适合内容创作者和营销团队的快速图片处理。对于需要批量处理或动态图片加框的场景，推荐使用 CSS（border、box-shadow、border-radius）在线展示而非生成新的图片文件，以减少存储和带宽开销。如果必须生成处理后的图片，使用 Sharp 或 ImageMagick。