Estoy tratando de implementar el cambio de tamaño de las imágenes del lado del cliente y luego publicarlas en el backend. No sé mucho sobre lienzo. Hay 9 imágenes que tengo que cargar simultáneamente. Lo que necesito hacer es

primero verifique cada imagen si cumple con nuestros requisitos de tamaño.segundo disminuya su peso para que no tarde mucho en cargar.Ahora sé que está tomando mucho tiempo.

Traté de implementar esto mediante getImageData y convertir esos datos en 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});
}