Question

我正在尝试实现客户端调整图像大小，然后将它们发布到后端。我不太了解帆布。我必须同时上传9张图片。我需要做的是

如果符合我们的尺寸要求，请先检查每张图片。
第二次降低其重量，因此上传时间不会太长。
知道这需要花费很多时间。

我试图通过getImageData实现它并在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

如何进一步减少上传＆＃34;重量＆＃34;

看起来你好了＆＃34;有损＆＃34; jpg因此你可以另外将jpeg的图像质量设置为中等值，以使其更加轻盈＆＃34;。

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

要处理9个jpegs，您可以：

累积数组中所有9个jpeg编码的字符串：var jpegs=[];
准备发送时，使用JSON对javascript数组进行字符串化：var jsonJpegs=JSON.stringify(jpegs)
或者，使用javascript ZIP脚本进一步减少编码图像的权重。一个示例zip库：https://stuk.github.io/jszip/

带注释的代码和演示：

＆＃13;

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

＆＃13;

img{border:1px solid red;}

＆＃13;

<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>

＆＃13;

客户端调整图像并使用画布发布

1 个答案: