我们正在开发一个 PhoneGap 应用程序,在开发的核心功能中,它还具有用户配置文件部分。在该屏幕/部分中,我们允许用户更新各种详细信息,包括他们的个人资料图像。个人资料图片可以用相机拍摄(效果很好),也可以从用户照片库中选择。这就是我们的问题所在。
我们正在使用 navigator.camera.getPicture
从用户相机或相机胶卷加载照片功能。
然后我们创建一个新的 Image()
并设置 imageURI
由电话差距作为图像返回src
.在onload
图像的功能,我们将图像绘制到 Canvas 上下文中以调整大小并将其裁剪成正方形。
我们的图像有问题,渲染图像时被压扁了,但我们已经在这篇文章 (HTML5 Canvas drawImage ratio bug iOS) 的帮助下解决了这个问题
问题:当我们直接从相机获取图像时一切正常,但当我们设置 destinationType
时一切正常。至 navigator.camera.PictureSourceType.SAVEDPHOTOALBUM
或 navigator.camera.PictureSourceType.PHOTOLIBRARY
图像旋转不正确。
correctOrientation
设置为 true。
我们正在使用 Cordova 2.8
只有designationType为FILE_URI
时才能获取图片数据用于相机和 NATIVE_URI
对于 PHOTOLIBRARY
.这种差异是否与我们的问题有关?
代码是:
navigator.camera.getPicture(function (imageURI) {
context = // 2d context from canvas object in the DOM
base_image = new Image();
base_image.onload = function () {
var x = 0;
var y = 0;
var w = 144;
var h = 144;
... // some size and offset calculations
var ratio = ... // calculate a ratio based off this question https://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
context.drawImage(base_image, x, y, base_image.width, base_image.height, 0, 0, w, h/ratio);
url = context.canvas.toDataURL().toString();
DOMImage.src = url
}
base_image.src = imageURI;
}, function (error) {
enyo.log("Error " + error);
}, {
quality : 49,
targetWidth: 114,
targetHeight: 114,
sourceType: sourceType,
encodingType: Camera.EncodingType.JPEG,
destinationType: destinationType,
correctOrientation: true,
saveToPhotoAlbum: false
});
非常感谢任何建议。
最佳答案
图像方向存储在 EXIF 数据中。 Here您可以找到解决问题的方法。
关于javascript - 转换后PhoneGap图像旋转问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19004994/