Resize photo before upload to server

[Mark_E_2]

Hi,

I am building an iOS app that allows the user to upload photos taken directly from the camera to the server.  This all works fine.  However, the quality (and hence file size) seems to vary wildly depending upon the class of device (in general, the newer devices generate larger files).  Naturally, as both the number of images retrieved and the size of those files increase, my app's performance starts to bog down.  I figured that I should normalize the file size, regardless of device, before uploading.  However, I could not figure out how to do this part.  Currently, I am using the Intel XDK Camera but would be open to using an alternate Cordova plugin.  I have tried playing with the "quality" parameter of the takePicture method.  Just for reference, below is the current line of code that I am using:

intel.xdk.camera.takePicture(99, true, "png");

For comparison, I replaced 99 with 10, but I didn't notice any appreciable difference in the resulting file sizes.

Has anyone accomplished something similar?  Any other ideas?

Thanks in advance,

-Mark

[Swati_S_Intel1]

Try using Cordova Camera plugin : https://github.com/apache/cordova-plugin-camera, you can include it from the core plugins section on Projects tab. You can use quality=0 for the lowest quality image. 

As you mentioned you are using the images directly captured through camera, so it should not affect you but just in case you are using the pictures from the gallery see this note :

NOTE: Photo resolution on newer devices is quite good. Photos selected from the device's gallery are not downscaled to a lower quality, even if a quality parameter is specified.

[Swati_S_Intel1]

With the plugin you can specify the encodingType when you capture the image (JPG or PNG) using options parameter. You don't need to deal with underlying device format. As a result of capture you get the format you specified (JPG or PNG). If you're trying to get images from photo gallery, you can retrieve images with the original encoding.

[Mark_E_2]

Thanks for the reply Swati.  I added the "cordova-plugin-camera" to my project, as you suggested.  However, at build time, I now see the following error:

Build Log:

• Building a Cordova 4.1.2 application.
• The application name is "footsie"
• The package name is "com.footsiedate.footsie"
• Will use the provisioning profile for "adhoc"
• Error: Plugin "Camera" failed to install.
• Plugin "org.apache.cordova.splashscreen" (0.3.5) installed.
• Plugin "org.apache.cordova.inappbrowser" (0.5.4) installed.
• Plugin "intel.xdk.contacts" (1.1.4) installed.
• Plugin "org.apache.cordova.device-motion" (0.2.11) installed.
• Plugin "intel.xdk.file" (1.1.1) installed.
• Plugin "intel.xdk.device" (1.1.12) installed.
• Plugin "intel.xdk.camera" (1.1.5) installed.
• Plugin "intel.xdk.cache" (1.1.0) installed.
• Plugin "org.apache.cordova.statusbar" (0.1.9) installed.
• Plugin "uk.co.whiteoctober.cordova.appversion" (0.1.7) installed.

Any ideas?

Thx,

-Mark

[Swati_S_Intel1]

The Intel XDK Camera plugin might be conflicting. Please remove intel.xdk.camera plugin and try again. If that does not work, tell me which version of camera plugin are you using.

[Swati_S_Intel1]

Also, attach your build log.

[Nick_F_2]

Resizing an image by setting the quality can have a knock on effect to the overall quality of the image i.e. reduced resolution.

If image quality is not an issue then this is an acceptable method.

However I prefer to resize images after the upload  so we can preserve the image quality through suitable compression. I use an ASP.NET ASMX webservice that also creates a thumbnail of an image or movie file to display in the Gallery Backend.

Using this procedure we have handled in excess of 180,000 images for our customers (Approx 85GB of image data) taken from Android and iOS devices.

[Mark_E_2]

@Swati S,

Thanks again for the reply.  I, too, thought there might be conflict with the Intel XDK Camera plugin.  However, when I removed that one I got an entirely different "ENOENT" error.  Is it possible that my plugin setup is somehow "mangled", as I know that Intel XDK recently made some major changes to the internal "registering" of Cordova plugins?  Is there a known way to "re-create" this for an existing project?  Also, I did attach my "build log" to my previous post.  Or is there some other build log that  would help you investigate further?

@Nick F

Thanks for your comments on the "quality" setting and reduced resolution.  I'll have to see if that is an issue for my app, once I get to play with that setting.  (I am kind of hoping it's a non-issue as the photos I am uploading do not require a particularly high resolution.)

[Swati_S_Intel1]

@Mark, yes, I see the error you mentioned, I'm trying to investigate what could have caused it and trying to find a workaround. Could you please send the screenshot of the error? Also, the detailed build log is available on the build page through "here" link.

[Swati_S_Intel1]

It seems there is certainly some plugins version and Cordova CLI version mix up going on. While I was able to reproduce the error once, I  haven't been able to consistently reproduce. I have reported this to the responsible engineer. But meanwhile for your current situation, I recommend this workaround :

-delete the specific plugin folder manually from your Project directory > Plugins  folder using file explorer

-And then remove the plugin from XDK 

- then add the plugin again.

- You might have to do this for all the plugins

I hope this helps.

[Mark_E_2]

I did a little more investigation.  Here is what I have found:

1. I suspect that the problem I ran into when I added the cordova-camera-plugin to my project is related to the fact that my project is setup with Cordova CLI 4.1.2.  Based upon that plugin's NPM project page, it appears that it "requires cordova 5.0+".  (BTW, I did try to use the "deprecated id" of this plugin -- as described on the plugin's project page -- that is, apparently, Cordova CLI 4.1.2 "friendly", but that didn't work either.)

2. After I backed out all references to the cordova-camera-plugin and reverted to the intel-xdk-camera plugin instead, I was able to get my project to build again without error.  In doing this, the version of this plugin was updated from 1.1.5 to 1.2.3.  I hoped that, perhaps, this plugin update included a fix to the "quality" parameter (my previous tests had NOT shown any significant difference in the size of the resulting file no matter what value I used for the "quality" parameter).  Unfortunately, once again I saw no difference in this regard.

At least my app is now working again.  At a later time, I will update my project to Cordova 5.0 and start, once again, down the path to convert my use of intel-xdk-camera plugin to cordova-camera-plugin.

-Mark

[Swati_S_Intel1]

Glad your project could build however I encourage you to use cordova-camera-plugin as Intel XDK plugins are not being maintained. Your resize issue might get resolved with that plugin.