PhoneGap 中 iPhone 5 的相机功能，图像被压扁答案

【问题标题】：Camera Functionality of iPhone 5 in PhoneGap, image squashedPhoneGap 中 iPhone 5 的相机功能，图像被压扁
【发布时间】：2012-09-23 06:15:29
【问题描述】：

所以我有一个 ios 应用程序，在 ios6/iPhone5 之前。它运作良好。我目前正在尝试为 iPhone5 和 ios6 修复它。进展顺利，我已经解决了 99% 的 ios6 错误，并且似乎可以正常工作。然而，iPhone 5 是喜怒无常的。

我正在使用 PhoneGap 1.8.1。有一次我用相机拍了一张照片，使用这个功能：

function capturePhoto() {

        networkState = navigator.network.connection.type; 

            if (networkState == Connection.NONE)
                {
                  alert('You must be connected to the internet to use this feature!');

                }else{


                var options = {
                    quality: 100,
                    correctOrientation: false,
                    destinationType : navigator.camera.DestinationType.FILE_URI,
                    sourceType: navigator.camera.PictureSourceType.CAMERA,
                    encodingType: navigator.camera.EncodingType.JPEG,
              }
          navigator.camera.getPicture(onPhotoDataSuccess, onFail, options);

    }
}

然后我将图像显示为 HTML 画布上的背景。使用 kineticJS，但为了解决这个问题，我认为您需要知道的只是：

var canvaswidth = window.innerWidth;
var canvasheight = window.innerHeight;

var darthVaderImg = new Kinetic.Image({
                                          x: 0,
                                          y: 0,
                                          image: images.darthVader,
                                          width: canvaswidth,
                                          height: canvasheight,
                                          name: "image"
                                          });

这在 iphone 4s ios 6 上运行正常，在 android 上运行正常……但在 iPhone 5 上却不行。图片是正确的方向，但它在顶部被压扁了，我尝试将其硬编码为 iPhone 5 的屏幕尺寸......我相信是 640x1136？

仍然没有运气，例如，如果我夸大并将图像高度设置为 2000，它确实会覆盖屏幕，但会被放大。我对正在发生的事情有点迷失......任何人都有类似的问题，或任何想法？

【问题讨论】：

标签： javascript cordova ios6 iphone-5

【解决方案1】：

好的，所以我想我已经想通了：

首先要意识到 iPhone 5 拍摄的照片尺寸与 iPhone 4S 完全相同。我刚刚测试并确认了这一点。所以额外的屏幕尺寸是无关紧要的。

当我意识到这一点时，我使用了 Simon MacDonald 写的一篇文章。可在此处获取：

http://simonmacdonald.blogspot.co.uk/2012/07/change-to-camera-code-in-phonegap-190.html

然后我将这两行添加到我的 capturePhoto 函数中：

targetWidth: 320,
targetHeight: 480,

这确保了拍摄的图像尺寸正确，另外的好处是它在 4 和 5 上是正确的。

然后我确保它以正确的尺寸显示在画布上，我的画布显示尺寸变为：

var canvaswidth = 320;
var canvasheight = 480;

var darthVaderImg = new Kinetic.Image({
                                          x: 0,
                                          y: 0,
                                          image: images.darthVader,
                                          width: canvaswidth,
                                          height: canvasheight,
                                          name: "image"
                                          });

这使图像保持成比例，我的完美主义者说它只有 99% 正确，但它覆盖了画布并且没有不成比例。

这确实让我在 iPhone 5 上留下了多余的“空间”，但我只是通过检测窗口高度来使用 IF 语句来解决这个问题：

window.innerHeight

使用它作为变量，我可以在 iphone5 和 iphone4/4s 之间进行区分，然后我可以为两者设置不同的规则，就显示操作而言。

希望这对遇到同样问题的人有所帮助。

【讨论】：