在 Parse Cloud Code 中旋转包含 EXIF 方向的上传图片
Rotate uploaded pictures containing EXIF orientation in Parse Cloud Code
肖像照片,从某些移动设备拍摄,通过 HTML 表单上传,但在嵌入网页时方向错误。
这是由于 EXIF orientation 元数据,例如,它的值 6 = Rotate 90 CW
告诉图像以特定方向显示。但是,图像本身(没有元数据)作为水平图像横向存储。根据图像渲染器,您将看到正确的图像(如下面的左缩略图)或未应用旋转元数据(如右缩略图)。对于嵌入网站的图像,则为后者。
有什么方法可以在 Parse Cloud Code 托管的网络应用程序中使用 Javascript 或 Node.js 手动旋转上传的图片? (仅解析云代码 supports a few dependencies - 但您仍然可以自己上传小脚本)。
您应该可以使用 npm modules in cloud code: Using npm modules in cloud code
完成后,jpegorientation npm 模块应该满足您的要求:
var jpeg = require('jpegorientation');
jpeg.autoRotate('image.jpg', function (err) {
// error handler
});
如果您无法使 npm 模块正常工作,您始终可以手动包含该库。如果您 运行 遇到该库和 node-gyp 的问题,还有其他模块需要考虑:
- exif-rotate (combined with exif or exif-component确定方向)
- fix-orientation(看起来基于浏览器)
我最终编写了一个客户端 class 用于旋转和调整上传图像的大小。我正在使用 Canvas 元素和 HTML5 FileReader。
有关源代码和一些示例,请参阅 https://github.com/ajgarn/CanvasImageUploader。
class 为您提供图像数据(Blob),可以将其发布到 Parse's REST API,就像您通过 FileReader 上传文件一样。
肖像照片,从某些移动设备拍摄,通过 HTML 表单上传,但在嵌入网页时方向错误。
这是由于 EXIF orientation 元数据,例如,它的值 6 = Rotate 90 CW
告诉图像以特定方向显示。但是,图像本身(没有元数据)作为水平图像横向存储。根据图像渲染器,您将看到正确的图像(如下面的左缩略图)或未应用旋转元数据(如右缩略图)。对于嵌入网站的图像,则为后者。
有什么方法可以在 Parse Cloud Code 托管的网络应用程序中使用 Javascript 或 Node.js 手动旋转上传的图片? (仅解析云代码 supports a few dependencies - 但您仍然可以自己上传小脚本)。
您应该可以使用 npm modules in cloud code: Using npm modules in cloud code
完成后,jpegorientation npm 模块应该满足您的要求:
var jpeg = require('jpegorientation');
jpeg.autoRotate('image.jpg', function (err) {
// error handler
});
如果您无法使 npm 模块正常工作,您始终可以手动包含该库。如果您 运行 遇到该库和 node-gyp 的问题,还有其他模块需要考虑:
- exif-rotate (combined with exif or exif-component确定方向)
- fix-orientation(看起来基于浏览器)
我最终编写了一个客户端 class 用于旋转和调整上传图像的大小。我正在使用 Canvas 元素和 HTML5 FileReader。
有关源代码和一些示例,请参阅 https://github.com/ajgarn/CanvasImageUploader。
class 为您提供图像数据(Blob),可以将其发布到 Parse's REST API,就像您通过 FileReader 上传文件一样。