在Parse Cloud Code中旋转包含EXIF方向的上传图片

Question

从一些移动设备拍摄的,通过HTML表单上传的纵向图片在嵌入网页时会出现错误的方向.

这是由于EXIF方向元数据,其可以例如具有6 = Rotate 90 CW告知图像以特定方向显示的值.但是,图像本身 - 没有元数据 - 作为水平图像横向存储.根据图像渲染器,您将正确地看到图像(如下左侧缩略图所示)或未应用旋转元数据(作为右侧缩略图).对于嵌入在网站中的图像,它是后者.

有没有办法在Parse Cloud Code托管的Web应用程序中使用Javascript或Node.js手动旋转上传的图片？(解析云代码仅支持一些依赖项 - 但您仍可以自己上传小脚本).

Answer 1

我最终编写了一个客户端类，用于旋转和调整上传图像的大小。我正在使用 Canvas 元素和 HTML5 FileReader。

源代码和一些示例请参见https://github.com/ajgarn/CanvasImageUploader。

该类为您提供图像数据（Blob），可以将其发布到Parse 的 REST API，就像通过 FileReader 上传文件一样。