游戏素材处理4 分钟阅读

图片上传后转了两次?先区分 EXIF 方向与真实像素旋转

相同图片在不同预览中方向不一致时,记录方向元数据与实际解码行为,不要连续手动旋转直到看起来正常。

图片上传后转了两次?先区分 EXIF 方向与真实像素旋转
药水卡片与像素网格的概念图
AI生成的像素概念图,不是EXIF方向或旋转修复实测。

原图在查看器里方向正确,上传或导出后却横过来;手动转一次,另一个预览反而又错了。先确认“像素已经转过”与“查看器按方向标记显示”是否被混为一谈,不把每次差异都归为素材损坏。

一个文件可能有两层方向信息

编码像素的排列与EXIF方向元数据不是同一件事。一个解码器可能按元数据调整显示,另一个流程可能采用不同选项;因此,应记录实际输入与解码路径,而不是只比较两张预览截图。

MDN的createImageBitmap参考说明,imageOrientation默认from-image会采用存在的EXIF方向;none按图像编码处理并忽略方向元数据;flipY则在应用方向信息后再做垂直翻转。具体支持情况仍要按实际浏览器和库确认,不能推断所有加载接口行为完全相同。

先定位哪一步真正改变了像素

  1. 保留未经修改的输入文件,记录编码尺寸、可取得的方向标记及查看器。
  2. 确认解码步骤是否已经采用方向信息,再查是否额外做了旋转或翻转。
  3. 检查导出文件的实际像素方向和保留的方向标记,不只检查预览。
  4. 在第二个明确解码设置的流程中复验同一输出,避免用单个查看器作唯一依据。

例如,一个编码尺寸为1200×800的画面,若显示时按90°旋转,显示方向可对应800×1200。这个几何例子不表示文件字节已被重排,也不保证每个接口报告的尺寸处在同一处理阶段。

避免修好了像素,却留下旧方向标记

若交付要求统一方向,由处理流程明确“是否已将方向烘焙进像素”和“输出元数据如何处理”。已经按EXIF转正后再无条件手动旋转,可能产生第二次处理;反过来,尚未处理就删除方向标记,也可能改变后续显示。

不要把这件事与Spine图集旋转打包混为一谈,Atlas里的旋转由图集元数据解释。也不要期待修改DPI标签改变像素方向。

对交付文件做独立验收

可通过资源压缩工具的正常文件流程准备对照副本,再检查下载结果的尺寸、方向和画面。本文不宣称该工具内部采用特定解码API,也不保证其提供EXIF选项开关。

本篇没有对浏览器或用户图片做方向实验。验收记录要保留输入、处理设置和最终文件,配图仅为像素概念,不是相机照片或方向修复前后对照。

准备好实践「图片上传后转了两次?先区分 EXIF 方向与真实像素旋转」了吗?

使用本站在线工具,将教程中的步骤立刻应用到你的独立游戏项目。