Image compression doesn't work on iPhones

[sdellis]

Uploading images on iPhones/iPads will work without compression, but uploading a 10MB image won't do.

[hansoncyu]

I think I figured out the problem for the image compression but I don't have an iphone to test it. The problem is that mobile iOS has a limit to the height and width of a canvas.

 iPod Touch 16GB = 1448x1448
 iPad Mini       = 2290x2289
 iPhone 3        = 1448x1448
 iPhone 5        = 2290x2289

Our code right now is setting the canvas dimensions to the photo dimensions.

It seems like the iphone's photo dimensions are larger than the max limit of the canvas dimensions. To solve this issue, the width and height of the canvas needs to be set smaller. When we draw the image on to the canvas, we also need to reduce the photo dimensions. Syntax for canvas drawing is: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

The code for drawing should go from :

var cvs = document.createElement("canvas");
cvs.width = source_img_obj.width;
cvs.height = source_img_obj.height;
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);

to:

var cvs = document.createElement("canvas");
// will need to figure out best dimensions to scale down to
cvs.width = 2000;
cvs.height = 2000;
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, 2000, 2000);

We need to make sure scaling down doesn't cause the image quality to suffer too much. To test this fix, I would need access to an iphone and the s3 bucket to make sure the images are compressed and uploaded correctly.

[sdellis]

Super helpful, @hansoncyu ! Thanks for the detective work here. I have an iPhone 5 at home I can test with later.