图像和照片 · 浏览器图像和绘图编辑器
浏览器图像编辑器中裁剪的工作原理：画布和像素
· 工作原理
图像编辑 画布 浏览器处理
裁剪看起来微不足道，但浏览器编辑器必须解码文件，将像素矩形复制到画布上并编码全新文件。这篇文章将逐步介绍每个步骤，并解释哪些内容发生了变化，哪些内容保持不变。
为什么裁剪后的照片是一个新文件，而不是修剪过的旧文件 - 裁剪不能简单地从 JPEG 或 PNG 中删除字节，因此编辑器会解码并重新编码
JPEG 存储压缩图像数据，而不是每个可见行一个独立可删除的字节范围。从末尾删除字节会损坏文件，而不是修剪照片。因此，浏览器编辑器对图片进行解码，选择一个矩形并创建一个新的编码文件。原件保留在您的磁盘上。如果您需要可逆编辑，请保留源坐标和选择坐标：导出的裁剪不包含丢失的像素。
将图像解码为位图 — 在选择任何内容之前，浏览器如何将压缩字节转换为 RGBA 像素的宽度 × 高度网格
浏览器将压缩的 JPEG、PNG 或 WebP 转换为宽度 × 高度样本的位图。 4000×3000 的图像在任何裁剪之前代表 1200 万像素，每个像素几个字节可能会使其内存占用量比磁盘上的文件大得多。 ToolAcre 在分配非常大的工作区之前检查图像和画布限制。您在屏幕上看到的内容可能会缩放以适合视口；在复制像素之前，裁剪矩形仍必须映射回图像坐标。
选择矩形：源坐标和目标坐标——drawImage 如何将选定区域复制到目标大小的画布上，以及舍入到整个像素意味着什么
矩形是原点 (x,y) 加上宽度和高度（以源像素为单位测量）。 ToolAcre 将该矩形限制在文档边界并裁剪每个可见层，而不仅仅是合成预览的屏幕截图。它为每一层创建一个目标画布，并使用九个参数调用drawImage：源画布、源矩形、目标原点和目标大小。在源尺寸和目标尺寸相同的情况下，无需调整大小步骤即可选择像素。小数指针位置被舍入或固定为可表示的画布像素。
将结果编码回文件 - 为什么导出步骤决定格式和质量，以及为什么裁剪本身是准确的，而编码可能不准确
导出是与裁剪分开的操作。编辑后的画布可以编码为 PNG、JPEG 或 WebP，具体取决于选项和浏览器支持。 PNG 可以保留提供给其无损编码器的像素；即使精确选择了矩形，JPEG 也会丢弃一些细节，并且在使用不带 Alpha 的格式时，透明度需要经过深思熟虑的背景。新文件还可以省略源元数据或颜色信息，因此切勿将其描述为原始文件的逐字节子集。
工作示例：将 4000×3000 照片裁剪为 1600×900 横幅 — 通过解码、复制和导出跟踪像素计数
对于拥有 4000×3000 照片的博主，居中的 1600×900 横幅从 x=1200 和 y=1050 开始。 drawImage 将第 1200 到 2799 列和第 1050 到 1949 行复制到 1600×900 输出：1.44 百万像素而不是 1200 万像素。如果您要求编辑器将整个照片缩小到 1600×900，您会更改其纵横比并重新采样，而不是进行裁剪。在内存有限的手机上，编辑器可能会首先减少非常大的输入，因此在重复这些坐标之前检查显示的尺寸。
导出的作物无法从原始图片中恢复什么
这不是无损 JPEG 块裁剪：应用程序绘制像素并导出新容器。关闭原始文件后，导出的 1600×900 文件也无法恢复丢弃的边距。分层编辑文档又有所不同：裁剪作用于文档图层，而导出将它们合成到下载的图像中。对于敏感材料，裁剪边距比仅仅绘制不透明覆盖层更安全，但要检查导出的像素并保持原始像素的私密性。
要点：精确像素、新容器 - 为什么浏览器裁剪是精确的以及浏览器图像和绘图编辑器如何在不上传文件的情况下执行它
浏览器裁剪精确地决定要保留哪些解码像素，而所选的编码器则控制下载的文件。浏览器图像和绘图编辑器在您的设备上执行这两个步骤：加载图片、选择矩形、应用裁剪和导出。网络在这两个步骤中都不需要照片字节，但网站资产和公开的 AdSense/分析请求不应与 DevTools 中的文件上传相混淆。