使用React.js结合PptxGenJS生成PPT时图片旋转-90度问题咨询

1. JPEG图片的EXIF方向标记未被PptxGenJS解析 #

大部分手机或相机拍摄的竖屏JPEG会在EXIF元数据中记录Orientation字段（比如值为6代表需要顺时针转90度，对应PPT里显示的-90度旋转）。浏览器会自动读取这个字段并调整图片显示方向，但PptxGenJS默认不会解析EXIF的旋转标记，直接按图片原始像素尺寸插入PPT——这就导致PPT里的图片和浏览器显示的方向不一致。

• 只有那些保留了EXIF旋转标记的图片才会触发这个问题，这也是为什么不是所有使用者都会遇到的核心原因。

2. React中图片加载状态导致的尺寸错误 #

如果在React组件中，图片还未完成加载就调用PptxGenJS生成PPT，此时通过img.width/img.height获取的是图片原始像素尺寸（而非浏览器修正后的显示尺寸）。比如竖拍图原始尺寸是高>宽，PptxGenJS按这个尺寸插入后，PPT会默认按宽高比显示，看起来就像是旋转了-90度。

3. PptxGenJS版本或图片处理流程差异 #

• 旧版本的PptxGenJS完全没有处理EXIF方向的逻辑，而新版本可能修复了这个问题，不同用户使用的库版本不同会导致问题出现与否。
• 部分图片处理工具（如压缩、上传工具）会自动移除EXIF旋转标记并修正图片像素方向，这类图片就不会触发问题；而保留EXIF标记的图片才会暴露这个bug。

验证与临时解决思路 #

• 用exif-js读取图片的Orientation字段，根据标记值手动设置PptxGenJS的rotate属性（比如Orientation为6时，设置rotate:90），或交换图片的宽高参数。
• 确保在图片onLoad事件触发后再调用PPT生成逻辑，保证获取到的是浏览器修正后的显示尺寸。

内容的提问来源于stack exchange，提问作者João Vitor Alves Rocha