PNG裁剪

PNG裁剪是什么意思？

PNG 无损保存每个像素，还带完整的 8 位透明通道。PNG裁剪，就是把外围像素切掉、完全不碰剩下的像素——没有压缩瑕疵、没有画质软化，最关键的是透明不丢。一张 512×512 带透明底的 Logo 裁成 400×400 后，锐利的边缘和透底的四个角和原来一模一样。

这款PNG裁剪工具完全在浏览器里运行：素材以 RGBA 位图加载到 HTML5 画布，拖动裁剪框，画布只导出选中区域、直接回写 PNG——不上传、不经过服务器、不做格式转换。

为什么裁剪PNG？

PNG 是带透明和锐边素材的工作格式，裁剪需求大多来自这几处：

• 裁掉Logo白边：导出的 Logo 常常带一圈多余的空白，贴边裁剪后文件更小更干净，网页和 App 直接可用。
• 处理透明图标和贴纸：裁掉周围空白、透明背景完好保留——JPG 物理上做不到（没有透明通道）。
• 清理UI截图：把截取的对话框、菜单、图表裁到目标窗口，文字周围没有 JPG 那种糊边。
• 雪碧图切分：把一张雪碧图按精确像素边界切成单帧素材，全程无损。
• 头像徽章素材：把透明 PNG 裁成方形，做商品图、社区表情、论坛头像。
• 整理整套素材：一批贴纸、图标统一裁成同一尺寸。

PNG裁剪要点一览

浏览器端无损PNG裁剪是如何工作的？

工具把 PNG 解码成画布上的 RGBA 位图，覆盖可拖动选框，应用时通过 ctx.drawImage(src, sx, sy, sw, sh, 0, 0, sw, sh) 把选中矩形按相同像素尺寸 1:1 复制到第二个画布——不重采样，输出就是源图同一区域的逐像素拷贝；再无损编码回 PNG。透明自动保留：画布带 alpha 通道，编码器原样写回。

常见问题

裁剪会破坏透明背景吗？

不会。PNG 的透明通道解码进画布、导出时原样写回，选区内每个透明（或半透明）像素都保持原样——Logo 边缘的抗锯齿过渡不会被填充或破坏。

裁剪PNG会降低画质吗？

不会。PNG 无损，裁剪是像素级 1:1 区域复制（不重采样、不重压缩），输出和源图同一区域完全一致，唯一变化的是尺寸。

为什么裁完的PNG还是很大？

PNG 无损，体积和像素数、画面复杂度挂钩。裁剪确实有帮助——像素少了字节就少——但内容复杂的图依然不小。需要更小的文件，裁完再过一遍PNG压缩或转成 WebP 输出。

PNG还是JPG，该裁哪个？

带透明或文字锐边的 Logo、截图、线稿用 PNG裁剪；没有透明的照片用 JPG裁剪，文件小得多、观感几乎一致。

单张图片最大多大？

单张最大 200MB，裁剪全程在浏览器本地完成。

图片真的不会上传吗？

真的不会。PNG裁剪是 100% 浏览器端工具——图片在本地内存解码、选中区域在画布上复制、再导出保存，全程没有任何数据发往服务器。上传区上方的绿色标识会随时提醒你这一点。

PNG裁剪与其他工具对比