图像和照片 · 图像转换器和压缩器
canvas.toBlob 如何在浏览器中将 PNG 转换为 WebP
· 工作原理
图像格式 画布 网页
浏览器图像转换器是链接在一起的解码器、位图和编码器，整个链内置于浏览器中。这篇文章跟踪一个 PNG 通过解码、canvas 和 toBlob 到 WebP 文件，并记录了途中丢失的内容。
当不涉及服务器时 WebP 来自哪里 - 离线工作的转换器背后的具体问题
WebP 不是来自服务器端转换队列。您的浏览器已经具有图像解码器、可绘制像素表面和编码器； ToolAcre 转换器将它们连接起来。这就是为什么 PNG 可以在网站加载后在选项卡中进行转换。 “无上传”是指源图像和转换输出，而不是指完全没有网络活动的网站。
第一步：解码——浏览器如何将 PNG 字节转换为 RGBA 位图，以及为什么每种格式最终都是相同的网格
首先 PNG 被解码为图像位图。 PNG 压缩、调色板选择和颜色元数据决定其字节如何变成像素，但画布在解码的栅格上工作，而不是在 PNG 文件的块上工作。即使文件本身小得多，1600×900 的屏幕截图也会产生 1.44 百万像素位置。 ToolAcre 使用 createImageBitmap 并强制执行像素预算；大的解码图像在成为上传问题之前首先是内存问题。
第二步：将画布作为暂存区域 — 将位图绘制到尺寸匹配的画布或 OffscreenCanvas 上
位图被绘制到具有请求的输出尺寸的画布或 OffscreenCanvas 中。如果这些尺寸与源匹配并且未选择裁剪，则drawImage会暂存像素以进行编码；如果尺寸发生变化，画布会对它们重新采样，并且像素值可能会在 WebP 编码开始之前发生变化。相同的渲染例程服务于交互式预览和工作路径，防止这两个输出遵循不相关的算法。
第三步：具有 MIME 类型和质量的 toBlob — 如何选择编码器、质量编号控制什么以及为什么 PNG 会忽略它
在普通画布上， toBlob(callback, "image/webp",quality) 要求浏览器对 WebP 进行编码并使用 Blob 进行回调。在 OffscreenCanvas 可用的情况下，ToolAcre 使用 ConvertToBlob({type,quality}) 来完成同一作业。质量控制有损编码器；它不是特定字节数的承诺。 PNG 导出是无损的，其质量参数不会设置类似 JPEG 的压缩级别。始终检查实际返回的格式，因为编码器可用性取决于浏览器。
管道丢弃的内容——元数据、颜色配置文件和 16 位精度，以及为什么这是技术的属性而不是错误
重新编码已解码的栅格无法保留原始 PNG 容器中的所有事实。文本块、相机或编辑器元数据、某些颜色配置文件详细信息和源位深度可能无法在画布往返中保存下来； 16 位通道不会仅仅因为输入携带它们而成为 16 位 WebP。当编码器支持时，WebP 可以保持透明度，而 JPEG 导出需要填充透明区域。仅文件大小无法表明转换是否保留了细线或颜色。
工作示例：1.8 MB PNG 到 WebP 的屏幕截图 — 按照文件执行三个步骤并读取结果
考虑带有文本、渐变和透明角的 1.8 MB PNG 屏幕截图。对其进行解码，保持尺寸不变，选择 WebP，导出并将 Blob 大小和 MIME 类型与原始数据进行比较。生成的大小是经过测量的，不可预测：干净的屏幕截图可能会压缩得很好，而嘈杂的内容可能不会。在接受较小的文件之前，放大小字形和透明角。如果清晰的 UI 文本变得模糊，请保留 PNG 或调整编码器质量，而不是声称 WebP 总是更好。
这不包括动画图像、浏览器无法解码的格式以及 API 不公开的编码器设置
该管道不保证动画保留、每个设备上的 HEIC 解码或完全控制 WebP 编码器的子采样和工作参数。它还无法通过将 JPEG 源保存为 PNG 或 WebP 来恢复已丢失的详细信息。重复的解码/重新编码周期会累积损失。保留原始文件，并使用实际工具页面上列出的支持的输入/输出格式，而不是假设此处接受您的操作系统知道的每种格式。
要点：三步，零上传——图像转换器和压缩器如何在您的设备上运行此管道
机制是解码→绘制→编码，使用浏览器API进行，没有图像上传。 ToolAcre 公开目标格式和尺寸，以便您可以判断您是否只是更改容器或调整像素大小。在处理整批之前，在图像转换器和压缩器中测试一个具有代表性的屏幕截图，然后以人们将看到的大小检查下载的结果。