Resizing Image Taken Using Camera in Cordova/PhoneGap App
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY muhammed.junaid
3 years ago
Android
1
comments comment

One of our app utilize photographs taken using device camera. It was required to resize the taken image. After searching, it is realized that there is no native cordova plugin for image manipulations on different mobile platforms. It is also realized that canvas element of HTML can be utilized for image manipulations. There are numerous libraries that makes manipulations possible using canvas, all of them were supposed use from UI or required user facing canvas. But it was not the case in our app.

I implemented logic for resizing of image from camera completely as background operation. Following is that logic used to resize an image.

  • Create HTMLImageElement object using the simple constructor Image() and set image URL from the file path we have.
  • Once image is loaded, create a canvas object using document.createElement('canvas') with size we are going to resize image to.
  • Get 2D rendering context object for the canvas.
  • Draw the image on canvas using 2D context object to fill the canvas.
  • Get image data as data URL.
  • Convert data URL to binary data and write to a file.

After invoking camera app, we get file URI to the image file as shown below:


navigator.camera.getPicture(
  function(imageURI) {

  },
  function(err) {

  }
);

We can use imageURI to create the image object. And perform the resize logic to get resized image data. Here is the function receiving image URI and giving resized image data.


function resizeImage(longSideMax, url, callback) {
  var tempImg = new Image();
  tempImg.src = url;
  tempImg.onload = function() {
    // Get image size and aspect ratio.
    var targetWidth = tempImg.width;
    var targetHeight = tempImg.height;
    var aspect = tempImg.width / tempImg.height;

    // Calculate shorter side length, keeping aspect ratio on image.
    // If source image size is less than given longSideMax, then it need to be
    // considered instead.
    if (tempImg.width > tempImg.height) {
      longSideMax = Math.min(tempImg.width, longSideMax);
      targetWidth = longSideMax;
      targetHeight = longSideMax / aspect;
    }
    else {
      longSideMax = Math.min(tempImg.height, longSideMax);
      targetHeight = longSideMax;
      targetWidth = longSideMax * aspect;
    }

    // Create canvas of required size.
    var canvas = document.createElement('canvas');
    canvas.width = targetWidth;
    canvas.height = targetHeight;

    var ctx = canvas.getContext("2d");
    // Take image from top left corner to bottom right corner and draw the image
    // on canvas to completely fill into.
    ctx.drawImage(this, 0, 0, tempImg.width, tempImg.height, 0, 0, targetWidth, targetHeight);

    callback(canvas.toDataURL("image/jpeg"));
  };
}

First parameter is the maximum length of longer size. For example, if given 1000, then image will have either width or height of 1000 pixels, depending on longer side of source image.
If longer side of source image is less than given longSizeMax then long side length of original image will considered instead. Other side length will be calculated to keep the aspect ratio. The callback will be called with data URL as parameter.

To know more about data URL you can refer Wikipedia article https://en.wikipedia.org/wiki/Data_URI_scheme

Once we have data URL, we can convert it to binary or store directly on database table fields as they are strings.

Here is the function that can be used to convert data URL string to binary object.


/**
 * Credit: http://stackoverflow.com/a/5100158/499137
 */
function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i 

You can write binary object directly to file to create the final resized image file.

If you face any doubts, please feel free to get in touch with us.


RELATED ARTICLE

close

on 19th October 2012 / by anju.r
QR code is a two dimensional bar code having information which can be recognized and interpreted through electronic signals only. QR code is displayed in square pattern with dark dots in white background. For testing Mobile QR codes you have to first install a QR code reader on your device. For example QR Droid is one of the apps in the Android Market (Google Play) that adds QR Code support to Android phones. How to test QR Codes? Install any of the QR code apps for your phone Open the page where QR code is displayed. Open the application on your mobile and target your device's camera at the QR code. Then the bar code information will be displayed in your mobile. Test whether the information interpreted by the reader is the same as what was expected of the QR code. Android Software Testing Mobile Testing Encryption Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 16th October 2015 / by muhammed.junaid
One of our app utilize photographs taken using device camera. It was required to resize the taken image. After searching, it is realized that there is no native cordova plugin for image manipulations on different mobile platforms. It is also realized that canvas element of HTML can be utilized for image manipulations. There are numerous libraries that makes manipulations possible using canvas, all of them were supposed use from UI or required user facing canvas. But it was not the case in our app. I implemented logic for resizing of image from camera completely as background operation. Following is that logic used to resize an image. Create HTMLImageElement object using the simple constructor Image() and set image URL from the file path we have. Once image is loaded, create a canvas object using document.createElement('canvas') with size we are going to resize image to. Get 2D rendering context object for the canvas. Draw the image on canvas using 2D context object to fill the canvas. Get image data as data URL. Convert data URL to binary data and write to a file. After invoking camera app, we get file URI to the image file as shown below: navigator.camera.getPicture( function(imageURI) { }, function(err) { } ); We can use imageURI to create the image object. And perform the resize logic to get resized image data. Here is the function receiving image URI and giving resized image data. function resizeImage(longSideMax, url, callback) { var tempImg = new Image(); tempImg.src = url; tempImg.onload = function() { // Get image size and aspect ratio. var targetWidth = tempImg.width; var targetHeight = tempImg.height; var aspect = tempImg.width / tempImg.height; // Calculate shorter side length, keeping aspect ratio on image. // If source image size is less than given longSideMax, then it need to be // considered instead. if (tempImg.width > tempImg.height) { longSideMax = Math.min(tempImg.width, longSideMax); targetWidth = longSideMax; targetHeight = longSideMax / aspect; } else { longSideMax = Math.min(tempImg.height, longSideMax); targetHeight = longSideMax; targetWidth = longSideMax * aspect; } // Create canvas of required size. var canvas = document.createElement('canvas'); canvas.width = targetWidth; canvas.height = targetHeight; var ctx = canvas.getContext("2d"); // Take image from top left corner to bottom right corner and draw the image // on canvas to completely fill into. ctx.drawImage(this, 0, 0, tempImg.width, tempImg.height, 0, 0, targetWidth, targetHeight); callback(canvas.toDataURL("image/jpeg")); }; } First parameter is the maximum length of longer size. For example, if given 1000, then image will have either width or height of 1000 pixels, depending on longer side of source image. If longer side of source image is less than given longSizeMax then long side length of original image will considered instead. Other side length will be calculated to keep the aspect ratio. The callback will be called with data URL as parameter. To know more about data URL you can refer Wikipedia article https://en.wikipedia.org/wiki/Data_URI_scheme Once we have data URL, we can convert it to binary or store directly on database table fields as they are strings. Here is the function that can be used to convert data URL string to binary object. /** * Credit: http://stackoverflow.com/a/5100158/499137 */ function dataURItoBlob(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i You can write binary object directly to file to create the final resized image file. If you face any doubts, please feel free to get in touch with us. Android Leave a reply Your email address will not be published. Required fields are marker * david shirman (not verified) access_time 24 May 2019 - 15:26 Thanks, this was very helpful. Add new comment
Leave a reply
Your email address will not be published. Required fields are marker *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

author-image
david shirman (not verified)
access_time 24 May 2019 - 15:39

Thanks, this was very helpful.