Résumé des méthodes de compression d'images en JS

Cet article présente principalement la méthode de compression d'image en JS, y compris la méthode js de compression d'images dans des proportions égales. Les amis qui s'intéressent à js peuvent se référer à cet article

Tout d'abord, réfléchissez à ce que nous avons. avez-vous besoin? La plupart du temps, nous devons compresser un objet File, puis le transformer en objet File et le transmettre au serveur d'images distant ; parfois, nous devons également compresser une base64String et puis transformez-le en base64 La chaîne est transmise à la base de données distante, parfois il peut s'agir d'un canevas, ou d'un objet Image, ou directement de l'adresse URL d'une image. Nous devons les compresser et les télécharger vers la base de données distante. tant de demandes, Wang Er a simplement fait un dessin :

Texte alternatif

2. Solution

Comme le montre l'image ci-dessus, Wang Er a écrit un total de sept méthodes, qui couvrent essentiellement la conversion et la compression de la plupart des types de fichiers en JS, parmi lesquelles :

1. fn) L'objet image requis sera chargé via une URL, où le paramètre url est passé dans l'url de l'image, et fn est la méthode de rappel, qui contient les paramètres d'un objet Image. Le code est le suivant :

function urltoImage (url,fn){
  var img = new Image();
  img.src = url;
  img.onload = function(){
    fn(img);
  }
};

2. imagetoCanvas(image) convertira un objet Image en un objet de type Canvas, où le paramètre image est passé dans un Objet image, le code est le suivant :

function imagetoCanvas(image){
  var cvs = document.createElement("canvas");
  var ctx = cvs.getContext('2d');
  cvs.width = image.width;
  cvs.height = image.height;
  ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
  return cvs ;
};

3. canvasResizetoFile(canvas,quality,fn) va compresser et convertir. un objet Canvas dans un objet de type Blob ; le paramètre canvas est passé dans un objet Canvas ; le paramètre de qualité est passé dans un type numérique de 0 à 1, indiquant la qualité de compression de l'image. fn est la méthode de rappel, contenant les paramètres d'un objet Canvas. Objet Blob ; le code est le suivant :

function canvasResizetoFile(canvas,quality,fn){
  canvas.toBlob(function(blob) {
    fn(blob);
  },'image/jpeg',quality);
};

L'objet Blob représente ici des données brutes immuables similaires à un objet fichier. Les blobs représentent des données qui ne sont pas nécessairement sous forme native

JavaScript. L'interface File est basée sur Blob, héritant des fonctionnalités de Blob et l'étendant pour prendre en charge les fichiers sur le système de l'utilisateur. Nous pouvons le traiter comme un type de fichier. Pour une autre utilisation plus spécifique, veuillez vous référer au document MDN

4. canvasResizetoDataURL(canvas,quality) compressera un objet Canvas dans une chaîne dataURL, dans laquelle le paramètre canvas. est passé dans un objet Canvas ; le paramètre de qualité est passé sous la forme d'un nombre de 0 à 1, indiquant la qualité de la compression de l'image ; le code est le suivant :

methods.canvasResizetoDataURL = function(canvas,quality){
  return canvas.toDataURL('image/jpeg',quality);
};

Pour l'API toDataURL, veuillez vous référer au document MDN

5 filetoDataURL(file,fn) convertira le fichier de type File (Blob) en une chaîne dataURL, où. le paramètre file est passé dans un fichier de type File (Blob) ; fn est la méthode de rappel, contenant un paramètre de chaîne dataURL ; le code est le suivant :

function filetoDataURL(file,fn){
  var reader = new FileReader();
  reader.onloadend = function(e){
    fn(e.target.result);
  };
  reader.readAsDataURL(file);
};

6. dataURLtoImage(dataurl,fn ) convertira une chaîne de chaînes dataURL en un fichier de type Image, dans lequel le paramètre dataurl est passé dans une chaîne dataURL, fn est la méthode de rappel, y compris le paramètres d'un fichier de type Image, le code est le suivant :

function dataURLtoImage(dataurl,fn){
  var img = new Image();
  img.onload = function() {
    fn(img);
  };
  img.src = dataurl;
};

7. de chaînes dataURL dans des objets de type Blob, où le paramètre dataurl est passé dans une chaîne dataURL, le code est le suivant :

function dataURLtoFile(dataurl) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
};

3. Encapsulation supplémentaire

Pour compresser un objet File puis le transformer en objet File, nous pouvons réencapsuler la méthode ci-dessus, référez-vous au code suivant :

function fileResizetoFile(file,quality,fn){
  filetoDataURL (file,function(dataurl){
    dataURLtoImage(dataurl,function(image){
      canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
  })
}

Parmi eux, le paramètre file est passé dans un fichier de type File (Blob) ; le paramètre de qualité est passé dans un type numérique de 0 à 1, indiquant la qualité de compression de l'image. fn est la méthode de rappel, incluant les paramètres d'un fichier de type Blob ;

Cela fonctionne comme ceci :

var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
  console.log(res);
  //拿到res，做出你要上传的操作；
})

De cette façon, les images peuvent être compressées et téléchargées facilement. terminé. J'ai emballé les 8 méthodes ci-dessus et les ai mises sur github. Si vous l'aimez, vous pouvez la mettre en vedette.

ps : Voyons comment compresser des images avec le ratio JS

function proDownImage(path,imgObj) { // 等比压缩图片工具 
  //var proMaxHeight = 185; 
  var proMaxHeight=300; 
  var proMaxWidth = 175; 
  var size = new Object();　 
  var image = new Image();　 
  image.src = path;　 
  image.attachEvent("onreadystatechange", 
  function() { // 当加载状态改变时执行此方法,因为img的加载有延迟 
    if (image.readyState == "complete") { // 当加载状态为完全结束时进入 
      if (image.width > 0 && image.height > 0) { 
        var ww = proMaxWidth / image.width; 
        var hh = proMaxHeight / image.height;　 
        var rate = (ww < hh) ? ww: hh; 
        if (rate <= 1) {　 
          alert("imgage width*rate is:" + image.width * rate); 
          size.width = image.width * rate; 
          size.height = image.height * rate; 
        } else { 
          alert("imgage width is:" + image.width);　　 
          size.width = image.width;　　 
          size.height = image.height;　　　 
        }　 
      } 
    } 
    imgObj.attr("width",size.width); 
    imgObj.attr("height",size.height); 
  }); 
}

Résumé

Ce qui précède est un résumé des méthodes de compression d'images en JS présentées par l'éditeur. J'espère que cela sera utile. à tout le monde !

Recommandations associées :

Images téléchargées compressées JS

exemple de code d'effet de commutation manuelle du carrousel d'images js

Exemple de préchargement d'image JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!