javascript - Phonegap reduce image size - Stack Overflow

admin管理员组

文章数量:1312742

I have a phonegap application that has multiple input fields including textboxes/textareas/signatures/cad sketches/camera images. This data is uploaded to the server via an ajax post.

Problem:

When uploading the data the file is unreasonably large and takes a great deal of time to upload due to the images. When no photos are added the size is around 200kb - 400kb but with images the file has reached 60Mb and in terms of using an android device with a poor internet connection (Area with bad signal) this is unusable.

What I have tried:

I have used image pression in the camera options as seen in the below extract of code, however the challenge I am facing is that different devices with different camera specifications are utilized so if the device has a poor quality camera vs a device with a good quality camera image pression will take place regardless so the image quality will be terrible.

 var cameraOptions = {
                    destinationType: Camera.DestinationType.DATA_URL,
                    quality: 40,
                    encodingType: 0,
                };

Reference to the phonegap camera API and options:

.0.0/cordova_camera_camera.md.html#Camera

From reading the below post I deduced that jpeg is the lightest format so used the endodingType of 0

PNG vs. GIF vs. JPEG vs. SVG - When best to use?

What we want to achieve:

Limiting the image size to maximum of 500kb per image and if its larger then than that press it.

I have a phonegap application that has multiple input fields including textboxes/textareas/signatures/cad sketches/camera images. This data is uploaded to the server via an ajax post.

Problem:

When uploading the data the file is unreasonably large and takes a great deal of time to upload due to the images. When no photos are added the size is around 200kb - 400kb but with images the file has reached 60Mb and in terms of using an android device with a poor internet connection (Area with bad signal) this is unusable.

What I have tried:

I have used image pression in the camera options as seen in the below extract of code, however the challenge I am facing is that different devices with different camera specifications are utilized so if the device has a poor quality camera vs a device with a good quality camera image pression will take place regardless so the image quality will be terrible.

 var cameraOptions = {
                    destinationType: Camera.DestinationType.DATA_URL,
                    quality: 40,
                    encodingType: 0,
                };

Reference to the phonegap camera API and options:

http://docs.phonegap./en/2.0.0/cordova_camera_camera.md.html#Camera

From reading the below post I deduced that jpeg is the lightest format so used the endodingType of 0

PNG vs. GIF vs. JPEG vs. SVG - When best to use?

What we want to achieve:

Limiting the image size to maximum of 500kb per image and if its larger then than that press it.

• javascript
• android
• image
• cordova

Share Improve this question Follow edited May 23, 2017 at 12:17 CommunityBot 111 silver badge asked May 15, 2014 at 15:34 Chad BonthuysChad Bonthuys 2,03944 gold badges2828 silver badges3636 bronze badges 7

• What in the world are you doing to land JPG images that are that large? Or are you trying to upload a collection of images from a single form (even then, I would expect it to take at least 20 images to get anywhere near 60mb, and that's pushing it quite a bit). – Kerri Shotts Commented May 15, 2014 at 17:57
• Correct its a single dynamically built form of image fields that are used to capture photos with aproximately 15 - 25 images – Chad Bonthuys Commented May 15, 2014 at 18:13
• 1 Do you need the images in their original sizes? Why not limit the width/height of the captured image using targetWidth/targetHeight? It might not guarantee a 500kb image, but it would certainly help. – Kerri Shotts Commented May 15, 2014 at 18:20
• Having the images in the original sizes is not necessary. I was thinking of trying that and setting the width/height as a cameraOption on photo capture but I wasn't too sure what size I should use to retain a decent image. Additional the problem is this will only work for "new" images and previously downloaded images will still retain the old size – Chad Bonthuys Commented May 15, 2014 at 18:32
• IIRC, Facebook used to limit photos to something on the order of 1000 pixels on the long side. I think that's changed now to 2000 to better support retina displays, but if you don't need a full-screen image, you could probably get away with 500-1000px. – Kerri Shotts Commented May 15, 2014 at 18:44

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 6

I tried with different camera options and with the following I got file sizes of 4.5MB from an iPhone 5:

navigator.camera.getPicture(onSuccess, onFail, {
    destinationType : Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.CAMERA,
    quality : 50,
    encodingType : Camera.EncodingType.JPEG
});

Only by adding the line

correctOrientation : true

File size reduced to ~500kB.

I don't have any explanation to why it should work this way, but I suggest you try it if the quality property doesn't seem to do anything.

本文标签： javascriptPhonegap reduce image sizeStack Overflow