Downscale gallery photos for Camera plugin

Question

I am using Cordova 2.6 Camera plugin, to get images from device gallery, I am getting them with base64 encoding and I was trying to compress them to a lower quality using "quality" option.

I noticed that the compression was not working and when I read Cordova documentation at https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md, I can read :

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. To avoid common memory problems, set Camera.destinationType to FILE_URI rather than DATA_URL.

In my case I only can use DATA_URL, since I am using the base64 encryption for image upload with third party webservice. I am also using only images from device gallery (not from camera itself). I am having some performance issues, mainly on Windows Phone. My application take too much time to handle the base64 data, due to image size (I am testing with big images saved in device gallery, but which were captured using the 5 MP or 8 MP phone's camera).

My question is there a solution to get the "quality" option working for gallery photos in Cordova plugin?

Is there any custom plugin or fork where we can compress the device gallery photos?

Is there any other alternative that you suggest? (for example custom native plugin that uses FILE_URI and return compressed image base64 encryption)

score 0 · Accepted Answer · answered Apr 04 '16 at 15:15

we are using the following options when calling .getPicture:

quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.JPEG,
sourceType: Camera.PictureSourceType.CAMERA,
targetWidth: 800,
correctOrientation: true

The quality parameter doesn't seem to have too much implication on file size, though. targetWidth and, for some odd reason, correctOrientation do. The resultung picture size with these settings is around 24kB depending on the device's camera resolution.

score 0 · Answer 2 · answered Jan 19 '20 at 20:48

I'm using this next function after picking up any photo, either from camera or gallery. I'm using plugin cordova-plugin-simple-image-resizer

  function resizeImageIfNeeded (imageUri, callback) {
    // if image larger than this, resize
    var MAX_IMG_FILE_SIZE = 307200 // 300kb

    app.functions.getFileSize(imageUri, function (fileSize, err) {
      if (!err && fileSize && fileSize < MAX_IMG_FILE_SIZE) {
        // no need to resize image, return image unchanged
        console.log('Image Not resized (file already small): ' + imageUri)
        callback(imageUri)
      } else {
        // resize image (try even if file size is not obtained)
        resizeImage(imageUri, function (resizedImageUri, err) {
          if (err) {
            // could not resize image
            callback(imageUri, Error(err))
          }
          // return resized image
          callback(resizedImageUri)
        })
      }
    })
  }

  function resizeImage (imageUri, callback) {
    // get just fileName with suffix, ex.: "photo1_resized.jpg"
    var fileNameResized = addSuffixToFileName(
      getFilenameFromURL(imageUri)[1],
      '_resized'
    )

    var resizeOptions = {
      uri: imageUri,
      fileName: fileNameResized,
      quality: 90,
      width: 1200,
      height: 1200,
      base64: false
    }

    window.ImageResizer.resize(resizeOptions,
      function (resizedImageUri) {
        // success on resizing
        console.log('%c Image resized: ', 'color: green; font-weight:bold', resizedImageUri)
        callback(resizedImageUri)
      },
      // failed to resize
      function (err) {
        console.log('%c Failed to resize: ', 'color: red; font-weight:bold')
        callback(imageUri, Error(err))
      })
  }

  function getFileSize (fileUri, callback) {
    var fileSize = null
    window.resolveLocalFileSystemURL(fileUri, function (fileEntry) {
      fileEntry.file(function (fileObj) {
        fileSize = fileObj.size
        callback(fileSize)
      },
      function (err) {
        console.error('fileEntry error:\n', JSON.stringify(err))
        callback(fileSize, Error(err))
      })
    },
    function (err) {
      console.error('resolveLocalFileSystemURL error:\n', JSON.stringify(err))
      callback(fileSize, Error(err))
    })
  }

  // ex: from "file:///storage/emulated/0/Android/data/com.form.parking.violation/cache/1525698243664.jpg"
  // output[0] == "file:///storage/emulated/0/Android/data/com.form.parking.violation/cache"
  // output[1] == "1525698243664.jpg"
  function getFilenameFromURL (url) {
    if (!url) {
      return false
    }
    var output = []
    output[1] = url.split('/').pop()
    output[0] = url.substring(0, url.length - output[1].length - 1)
    return output
  }

Downscale gallery photos for Camera plugin

2 Answers2