0

I may be off the mark here but I wanted to find out if there actually is a solution to this problem before I try and solve it.

I'm using cordova on iOS and accessing the device's image gallery, fetching a photo's file.uri (the least memory hungry way according to phongap docs) and then rendering this into a roughly 50px x 50px image on the page.

The problem I've run into is that once I have loaded 4 or more photos onto the page, the performance starts to suffer, focus on other form elements becomes slow, and somewhat 'jerky'. I believe that this has to do with the fact that I am obviously rendering a high resolution image in a tiny box and when you have multiple high res images on one page you put a serious strain on the device's resources. This is on an iPhone 5, I would imagine the performance to be worse still on a 4s and 4.

Is there a way to programatically create 'low res' versions of the image(s) and then use these low res images on my page? In theory I have access to the image and its location, so can I not convert/compress/downscale these on the fly for the purpose of improving performance and then ditch these thumbnails/temp images once any upload of the actual image files is complete?

OliverJ90
  • 1,291
  • 2
  • 21
  • 42

2 Answers2

1

You could use a html canvas to create low res images.

Strille
  • 5,741
  • 2
  • 26
  • 40
0

Beter try this.

Take that image url in a string.

NSString *imgUrl=YourImageURL;

To get low resolution images you can divide the occurences of 1024x768 with 200x200.

 NSString *strURLLowRes = [imgUrl stringByReplacingOccurrencesOfString:@"1024x768" withString:@"200x200"];

Now you can load the low resolution image.

Hope this helps you.

Dev
  • 1,215
  • 9
  • 17