Question

So I had an ios app, pre ios6/iPhone5. It worked well. I am currently in the process of trying to fix it for iPhone5 and ios6. Was going well, and I have ironed out 99% of the bugs for ios6 and it seems to work. iPhone 5 however is being temperamental.

I am using PhoneGap 1.8.1. At one point I take an image with the camera, using this function:

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);

    }
}

I then display the image as a background on a HTML canvas. Using kineticJS but for the purposes of this problem I would think all you need to know is:

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"
                                          });

This running on iphone 4s ios 6 works fine, this on android works fine… but on iPhone 5 it does not. The picture is the correct orientation, but it gets squashed up in the top, I tried hard-coding it to the screen size of the iPhone 5…. which I believe is 640×1136?

Still no luck, if I exaggerate and set the image height to 2000 for example, it does cover the screen, but is zoomed in. I am abit lost as to what is happening…. anyone had a similar problem, or any ideas?

Answer 1

Ok, So I think I have figured this out:

First thing to realise is that iPhone 5’s take exactly the same size picture as a iPhone 4S. I’ve just tested and confirmed this. So the extra Screen size is irrelevant.

Once I realised this, using an article written by Simon MacDonald. Available here:

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

I then added these two lines to my capturePhoto function:

targetWidth: 320,
targetHeight: 480,

This ensured that the taken image was the correct size, and the added advantage is that its correct on the 4 and 5.

I then made sure it was displayed on the canvas in the correct size, my canvas display size became:

var canvaswidth = 320;
var canvasheight = 480;

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

This keeps the image in proportion, the perfectionist in me says that its only 99% correct, but it covers the canvas and is not out of proportion.

This does leave me with excess ‘space’ on the iPhone 5, but I just combated that with an IF statement by detecting the window height:

window.innerHeight

using this as a variable I am able to tell between iphone5 and iphone4/4s, and then I can set different rules for both, as far as display actions go.

Hope this helps anyone who comes across the same problem.