图像和照片·社交图像调整器
浏览器图像大小调整工作原理：Canvas、drawImage 和重新采样
· 工作原理
图像大小调整 画布 浏览器处理
浏览器可以解码照片，将其以新尺寸绘制到画布中并对结果进行编码，所有这些都无需服务器。这篇文章遵循该流程，解释了质量的优劣，并说明了为什么唯一的大小限制是设备的内存。
没有上传，没有服务器，仍然调整大小 - 当页面缩小 20 兆像素照片时工作发生在哪里的具体问题
照片可以通过 1350 变成 1080 肖像，而无需访问图像处理服务器。 Social Image Resizer 从浏览器选择器接收文件，验证其 MIME 类型和大小，然后调用 createImageBitmap。解码后的位图仍然是每个选定输出的源，因此一个本地对象可以提供多个不同形状的画布。
可见预览并不是隐藏在网络请求后面的最终导出。它是相同取景状态的较小画布渲染：目标比例、缩放、偏移、适合模式和背景。稍后导出会重复以预设尺寸渲染、对 Blob 进行编码并将 Blob 传递给页面中的下载控件。
解码是本地的，但此工具还强制执行 40 MB 输入限制
该计划表示设备内存是唯一的实际边界，但附带的输入路径也有明确的 40 MB 文件限制。 JPEG、PNG 和 WebP 被接受；其他类型在解码前被拒绝。在该门之后，createImageBitmap 要求浏览器将压缩文件字节转换为画布可用的宽度、高度和解码像素。
解码像素比压缩文件占用更多内存，并且每个输出画布都需要自己的分配。因此，渲染器在创建画布之前调用共享像素预算保护。这是第二个面向设备的约束，不允许承诺 40 MB 下面的每个文件都适合每台机器上的每个请求的输出。
当输出画布剪辑溢出时，drawImage 会缩放定位的完整位图
ToolAcre 不会计算源裁剪矩形并将八个源和目标参数传递给drawImage。它根据源尺寸和目标尺寸计算比例，定位整个缩放后的位图，并将其绘制到画布上，画布的边缘会遮挡任何溢出。在封面模式下，剪裁就是裁剪；在包含模式下，整个位图仍然可见。
区别很重要，因为裁剪和调整大小不是同义词。调整大小会更改位图采样的尺寸。裁剪会删除有限输出帧之外的所有内容。一个drawImage调用可以参与这里的两种效果，但是裁剪是通过帧几何和剪辑产生的，而不是通过首先重写源文件来产生的。
引擎盖下的重新采样 - 平滑设置、“高质量”提示要求浏览器做什么，以及为什么浏览器之间的结果略有不同
在绘制之前，渲染器启用 imageSmoothingEnabled 并将 imageSmoothingQuality 设置为高。这些是浏览器画布控件，而不是对命名 Lanczos、bicubic 或其他内核的请求。该实现无法保证跨引擎提供相同的样本，因为 API 公开了质量提示而不是浏览器的确切系数表。
有用的比较保持源、输出尺寸和浏览器固定，然后检查对角线边缘、细线和重复纹理。如果另一个浏览器略有不同，并不意味着目标比率发生了变化。这意味着相同的几何请求通过不同的画布实现，这正是本文避免发明性能或质量百分比的原因。
对输出进行编码 — 将画布转回编码图像文件并提供下载
当该方法存在时，导出画布通过 OffscreenCanvas.convertToBlob 变成 Blob，否则为 HTMLCanvasElement.toBlob。用户选择 JPEG、PNG 或 WebP。尽管 PNG 不像 JPEG 和 WebP 那样使用有损质量控制，但仍向编码器提供质量值。结果字节数是测量的，而不是估计的。
对于多个选定的目标，该工具会按顺序构建每个 Blob，显示其实际尺寸和测量的大小，并可以将已编码的文件打包为 ZIP。 ZIP 存储在这里并不能改善图像压缩；内容指出这些格式已经被压缩。单独的下载和存档均源自本地创建的字节。
此实现在主线程上执行导出工作，而不是在 Web Worker 中
工作手册称繁重的工作通常在 Web Worker 中运行，但该应用程序将裁剪和渲染函数直接导入到 main.js 中，并循环访问那里的目标。检查的路径中没有创建任何Worker。该页面仍然可以用于普通作业，但必须观察响应能力，而不是归因于不存在的体系结构。
网络隔离有两种证据支持。核心测试无需尝试就安装了网络防护并框架每个预设，而产品记录标记在本地处理。运行时网络面板检查可以添加部署证据。它应该将图像上传与普通页面资产或公开的分析区分开来，而不是声称整个页面没有发出请求。
这不包括什么 - GPU 加速的大小调整库和服务器端图像管道
该路线有意构建在浏览器基元上，而不是 GPU 库或远程媒体管道上。它不公开可选择的重采样内核、基准替代算法或承诺加速批处理。一张源图像产生多种裁剪；许多不相关的源文件属于不同的工作流程。
这些排除使承诺保持可测试性。该代码验证了文件验证、位图解码、算术成帧、画布绘制、Blob 编码和下载汇编。它没有证明服务器场如何调整相同像素的大小或浏览器可以在内部选择哪个 GPU 路径。声明仅止于所使用的可观察的 Web API。
要点：您的浏览器已经内置了一个缩放器 - Social Image Resizer 会为您驱动它，裁剪并缩放到平台的宽高比，而无需上传文件
浏览器已经提供了基本的操作，但有用的结果取决于它们周围的正确几何形状。 Social Image Resizer 选择覆盖的最大比例、包含的最小比例、夹紧移动、单独预览安全区域指导并以精确的目标尺寸导出。这种编排将低级绘图 API 转变为可重复的社交资产工作流程。
使用原始图像而不是之前缩小的副本来测试管道。选择当前的工具预设或自定义比例，移动主题，导出一次并检查下载的尺寸。证据是您收到的本地文件以及生成该文件的代码路径，而不是声称每个浏览器都使用相同的隐藏重采样器。