0

Sort of a small issue here that I've been struggling to find an answer to.

I am using the ios native camera to take a photo which I am then sending to phonegap to run some javascript on.

I pass the image into javascript, then draw it onto the left side of a small canvas element I have prepared in which the right side I will produce an altered image of the original (a side by side comparison). I realize that the images between the iphone4 and the iphone4s are differently sized pixel-wise but are at least the same proportion. My draw code:

function imageLoaded(img, frontCamera) {
element = document.getElementById("canvas1");
c = element.getContext("2d");

// read the width and height of the canvas- scaled down
width = element.width; //188  94x2
height = element.height; //125

//used for side by side comparison of images
w2 = width / 2;

// stamp the image on the left of the canvas

if (frontCamera) {
    c.drawImage(img, 0, 0, 94, 125);} else{
    c.drawImage(img, 0, 0, 94, 125)}

// get all canvas pixel data
imageData = c.getImageData(0, 0, width, height);

//more stuff here
}

When I execute this code on an iphone4, the image appears as should, side by side with the corrected image. When I use an iphone4s, the image draws out with the correct width, but it is a super squashed image, occupying the top sliver of the canvas.

Both devices are registering a screen.height and screen.width of 480 and 320 respectively with a window.devicePixelRatio of 2.

I figured the drawImage function would inherently scale the image appropriately.

I cannot seem to figure out what I am doing wrong. Thanks for the help!

Chaz
  • 233
  • 2
  • 11

1 Answers1

0

"I realize that the images between the iphone4 and the iphone4s are differently sized pixel-wise but are at least the same proportion."

iPhone 4 and iPhone 4s have the exact same screen size and pixel ratio and number of pixels, etc. They are esentially the same. If you're drawing each one different, then there's your problem.

The iPhone 3gs and below have non-retina displays. The iPhone 5 has retina but is taller.

If that's not the case, then it's something in your code (which means unless you publish it we can't help all that much).

I doubt very much that the issue is with Phonegap itself.

Jarrod
  • 9,349
  • 5
  • 58
  • 73
  • Thanks for the reply, Jarrod. I originally thought that the 4 and 4s produced different sized images- pixel wise according to [this](http://lifeinlofi.com/wp-content/uploads/2011/12/iPhone-image-sizes-1211.jpg). There's not much more to add to the code above. The image `img` that is passed in from the native camera is being drawn at `c.drawImage(...)`. I'll update the code to exactly what i have written. Thanks very much. – Chaz May 09 '13 at 22:04
  • This [stack thread](http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios) seems to be encountering the same issue. Something with subsampling when drawn to canvas on ios devices. My code above broke images coming from the front camera out because those are drawn correctly with 4 and 4s. Its the back camera that seems to be the issue with 4s (i've yet to try 5). – Chaz May 09 '13 at 22:19