Ich versuche, die Größe von Bildern clientseitig zu ändern und sie dann im Backend zu veröffentlichen. Ich weiß nicht viel über Leinwand. Es gibt 9 Bilder, die ich gleichzeitig hochladen muss. Was ich tun muss, ist

Überprüfen Sie zunächst für jedes Bild, ob es unseren Größenanforderungen entspricht.erringern Sie im zweiten Schritt das Gewicht, sodass das Hochladen nicht viel Zeit in Anspruch nimm Ich weiß, es braucht viel Zeit.

Ich habe versucht, dies mit getImageData zu implementieren und diese Daten in blob zu konvertieren.

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});
}