图像和照片·浏览器图像和绘图编辑器
编辑手机照片时浏览器如何处理 EXIF 方向
· 工作原理
图像编辑 画布 浏览器处理
手机通常会横向保存照片，并依靠一个微小的方向标签来告诉观看者如何旋转它们。这篇文章解释了该标签是什么，浏览器在解码过程中如何应用它，以及为什么编辑后的导出不再需要它。
手机上直立而其他地方横着的照片 — 具体症状及其背后的八值 EXIF 方向标签
从症状开始：在手机图库中看起来是直立的肖像在另一个查看器中可能是横向的。 EXIF 方向是附加到文件的指令，有八个可能的值描述翻转和四分之一圈。这里的有用证据比一般浏览器的承诺要窄：这个编辑器从范围对象 URL 加载 HTML 图像，绘制解码结果，并且没有固定装置证明每个浏览器如何处理每个方向值。
使用复制的手机照片作为测试样本。记录其显示的尺寸，进行小裁剪，将其导出，然后在第二个查看器中打开下载。 Canvas导出通过canvas.toBlob将显示的像素重新编码为PNG、JPEG或WebP；它不复制源容器或承诺保留 EXIF。比较会告诉您该栅格发生了什么，而不是每个文件都会做什么。
可能会出现横向结果，但此存储库不会解析八个 EXIF 方向值
存在不匹配是因为相机可以以方便的物理顺序记录传感器行，同时存储有关如何呈现这些行的紧凑指令。将该解释视为上下文，而不是有关本申请的声明。该存储库不会解析八个 EXIF 方向值，也不会证明在图像到达画布之前哪些浏览器版本应用了它们。
该限制改变了实际工作流程。保持原件不变，打开副本，并判断解码后的外观，而不是假设标签已被正确解释。编辑器可以以九十度为单位旋转整个栅格，但无法编辑或恢复方向元数据。因此，导出是一个新的像素结果，应在对您重要的查看器中检查其行为。
相机存储原理是外部存储库证据；检查实际解码结果
浏览器可以使用已反映在渲染像素中的方向指令来解码图像。现代 API 可以公开解码选择，包括 createImageBitmap 选项，但此代码路径不会调用 createImageBitmap 或设置 imageOrientation 选项。它从对象 URL 创建 HTML 图像并绘制该图像，因此实际的手机文件和浏览器仍然是实验的一部分。
分两个阶段检查结果：首先在编辑器中，然后在导出后。请注意文档报告的明显纵向以及宽度和高度。如果第一个视图是错误的，手动四分之一转可以使工作光栅看起来正确。如果第一种观点是正确的，请避免声称原始元数据已被普遍理解；存储库证据仅支持观察到的解码结果。
该编辑器加载 HTML 图像并设置没有显式方向解码选项
一旦像素穿过画布并再次编码，源容器就不再是正在传递的对象。编辑器将解码后的像素与您的裁剪和任何其他可见编辑合成，然后调用 canvas.toBlob 进行 PNG、JPEG 或 WebP 输出。该过程不承诺保留 EXIF 字段。特别地，该实现不能编辑或恢复方向标签以供稍后的查看者解释。
最安全的下载描述是包含此编辑会话生成的像素的图像。在另一个查看器中重新打开它并在共享之前检查方向。如果该查看者同意，则您已验证一项具体导出。您尚未验证所有 EXIF 行为，但已将此文件的不明确元数据指令替换为可测试的光栅结果。
Canvas 导出重新编码显示的像素，但不证明保留哪些元数据字段
考虑一张用于发送消息的手机肖像照片。打开副本，观察编辑器是否以直立方式显示人物，并在裁剪前记下解码的尺寸。如果场景是侧面的，则以九十度为步长旋转光栅，直到工作图像明显正确，然后仅在校正后进行裁剪。该操作是像素编辑，而不是对文件元数据的修复。
导出裁剪并将其与第二个图像查看器中的编辑器视图进行比较。 PNG、JPEG 和 WebP 是从画布生成的，因此输出是重新编码的图像，而不是原始手机容器。如果结果对操作很重要，请记录所使用的格式和查看器。这个小型审计为您提供了有关此肖像的证据，同时避免了对每部手机或浏览器的不受支持的承诺。
工作检查：在裁剪和导出之前比较解码的尺寸和外观
这项调查有明确的界限。该编辑器不提供元数据检查器、EXIF 编辑器或用于恢复原始方向值的工具。它也无法使忽略方向元数据的查看器正确运行。这些作业属于旨在保存或重写图像容器的软件，而不属于输出为展平光栅的画布工作流程。
同样的注意事项也适用于其他 EXIF 字段，例如拍摄时间、位置和相机详细信息。 Canvas 通过 canvas.toBlob 导出复合解码像素，并且不验证保留哪些元数据字段。如果这些字段很重要，请保留原始文件，使用编辑器进行可见图像工作，并在将导出的文件视为保留元数据的替换文件之前验证导出的文件。
要点：编辑一次，到处直立 — 在浏览器图像和绘图编辑器中进行编辑如何生成在每个查看器中显示相同的文件
实际要点很简单，但故意进行限制：编辑可见光栅，然后在另一个查看器中验证导出的方向。浏览器图像和绘图编辑器对于打开本地手机照片、以九十度为单位旋转整个光栅、裁剪它以及生成 PNG、JPEG 或 WebP 下载非常有用。它的加载程序和导出路径并不能证明通用 EXIF 处理的合理性。
可靠的检查只需不到一分钟。保留源代码，打开副本，记录初始方向和尺寸，进行少量编辑，导出一次，然后在其他地方检查下载。如果文件错误，返回副本并手动修正像素；不要假设可以在此处恢复方向标签。验证的结果是您实际打开并检查的文件。