Client side resize Image and posting using canvas

Question

I am trying to implement client side resizing of images and then posting them to backend. I dont know much about canvas. There are 9 images which I have to upload simultaneously. What I need to do is

• first check for every image if that fits our size requirements.
• second decrease its weight so it does not take much time to upload.
• right know it is taking a lot of time.

• I tried to implement this by getImageData and convert that data in blob.

  function readURL(input){
  
  var mtype = jQuery('input[name="format"]:checked').val();
  var resizedImage = '';
  if (input.files && input.files[0]) {
  
  var filetype = input.files[0].type.split('/')[1];
  
  if(allowedExt.indexOf(filetype) < 0){
      alert("Ce format de photo n’est pas pris en charge. Seules les photos au format JPG sont acceptées. "); 
      return false;
  } 
  
  var reader = new FileReader();
  
  reader.onload = function (e){
    var im = new Image();
    im.src = e.target.result;
    im.onload = function(){ 
  
      var imgHeight = im.height;
      var imgWidth = im.width;            
  
      var minWidth = minHeight = 1440;
      var maxWidth = maxHeight = 3600;
      var minSizeError = 'La taille de votre photo est inférieure au minimum requis qui est 1440px X 1440px';
      var minRatioError = 'Votre photo ne correspond pas au ratio 1:1 – Veuillez la recadrer ou en sélectionner une autre.';
      var aspectRatio = 1;
      var previmWidth = 107;
      var previmHeight = 107;
  
      if(mtype == 'h'){
        minWidth = 1920;
        minHeight = 1280;
        maxWidth = 4800;
        maxHeight = 3200;
        minSizeError = 'La taille de votre photo est inférieure au minimum requis qui est 1920px X 1280px';
        minRatioError = 'Votre photo ne correspond pas au ratio 3:2 – Veuillez la recadrer ou en sélectionner une autre.';
        aspectRatio = 1.5;
        previmWidth = 140;              
      }               
  
      if(imgWidth < minWidth && imgHeight < minHeight){
        alert(minSizeError);
        return false;
      }else{
        var imgAR = imgWidth/imgHeight;  
        var isunderacceptance = Math.abs(parseFloat(aspectRatio)-parseFloat(imgAR))*100;
        if(isunderacceptance <= 2){
          uploadedImg +=1;
          //currentImg.parent('td').find('input[type="hidden"]').val(im.src);
          currentImg.attr({'src':im.src,width:previmWidth,height:previmHeight});
        }else{
          alert(minRatioError);
          return false;
        }
      }                          
    }
    im.onerror = function(){
      alert('Please select a image file');
      return false;
    }
  // Resize the image
  var canvas = document.createElement('canvas'),
  max_size = 1440,// TODO : pull max size from a site config
  width = im.width,
  height = im.height;
  if (width > height) {
    if (width > max_size) {
      height *= max_size / width;
      width = max_size;
    }
  } else {
    if (height > max_size) {
      width *= max_size / height;
      height = max_size;
    }
  }
  canvas.width = width;
  canvas.height = height;
  canvas.getContext('2d').drawImage(im, 0, 0, width, height);
  var ctx = canvas.getContext('2d');
  var imgData = ctx.getImageData( 0, 0, width, height);
  var dataUrl = canvas.toDataURL('image/jpeg');
  resizedImage = dataURLToBlob(imgData);
  console.log(resizedImage); 
  }
   console.log(input.files[0]);
   //reader.readAsDataURL(input.files[0]);
   reader.readAsBinaryString(resizedImage);
   }
  }
  
  
     /* Utility function to convert a canvas to a BLOB */
     var dataURLToBlob = function(dataURL) {
     var BASE64_MARKER = ';base64,';
     if (dataURL.indexOf(BASE64_MARKER) == -1) {
     var parts = dataURL.split(',');
     var contentType = parts[0].split(':')[1];
     var raw = parts[1];
     return new Blob([raw], {type: contentType});
   }
  
   var parts = dataURL.split(BASE64_MARKER);
   var contentType = parts[0].split(':')[1];
   var raw = window.atob(parts[1]);
   var rawLength = raw.length;
  
   var uInt8Array = new Uint8Array(rawLength);
  
  for (var i = 0; i < rawLength; ++i) {
     uInt8Array[i] = raw.charCodeAt(i);
   }
  
  return new Blob([uInt8Array], {type: contentType});
  }
  

Answer 1

How to further lessen upload "weight"

Looks like you're ok with "lossy" jpg so you could additionally set the jpeg's image quality to a medium value to make it even more "light weight".

var jpeg = canvas.toDataURL('image/jpeg',0.50);

To process 9 jpegs, you can:

• Accumulate all 9 jpeg encoded strings in an array: var jpegs=[];
• When ready to send, use JSON to stringify the javascript array: var jsonJpegs=JSON.stringify(jpegs)
• Optionally, use a javascript ZIP script to further reduce the weight of the encoded images. One example zip library: https://stuk.github.io/jszip/

Annotated code and a Demo:

// canvas vars
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");

// define max resulting image width,height (after resizing)
var maxW=100;
var maxH=100;

// listen for user to select files
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
  var img = new Image;
  img.onload = function(){
    var iw=img.width;
    var ih=img.height;
    // scale down, if necessary
    if(iw>maxW || ih>maxH){
      var scale=Math.min((maxW/iw),(maxH/ih));
      iw*=scale;
      ih*=scale
    }
    // set canvas width/height to scaled size
    canvas.width=iw;
    canvas.height=ih;
    // draw+scale the img onto the canvas
    ctx.drawImage(img,0,0,iw,ih);
    // create a jpeg URL (with medium quality to save "weight") 
    var jpg=canvas.toDataURL('image/jpeg',0.60);
    // In Demo: add the jpg to the window
    // In production, accumulate jpg's & send to server
    $('<img />',{src:jpg}).appendTo('body');
  }
  // In Demo: Just process the first selected file 
  // In production: process all selected files 
  img.src = URL.createObjectURL(e.target.files[0]);
}

img{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Select an image file for resizing</h4>
<input type="file" id="input"/><br>