Zusammenfassung der Bildkomprimierungsmethoden in JS

In diesem Artikel wird hauptsächlich die Bildkomprimierungsmethode in JS vorgestellt, einschließlich der js-Methode zum Komprimieren von Bildern im gleichen Verhältnis. Freunde, die sich für js interessieren, können auf diesen Artikel verweisen

Überlegen Sie zunächst, was wir brauchen. Meistens müssen wir ein DateiObjekt komprimieren und es dann in ein Dateiobjekt umwandeln und es an den Remote-Image-Server übergeben. Manchmal müssen wir auch einen Base64String komprimieren Dann wird die Zeichenfolge in base64 umgewandelt. Manchmal handelt es sich um eine Leinwand oder ein Bildobjekt oder direkt um die URL-Adresse eines Bildes So viele Anforderungen, Wang Er hat einfach ein Bild gezeichnet:

Alt-Text

2. Lösung

Wie im Bild oben gezeigt, hat Wang Er insgesamt sieben Methoden geschrieben, die im Wesentlichen die Konvertierung und Komprimierung der meisten Dateitypen in JS abdecken, darunter:

1. fn) Das erforderliche Bildobjekt wird über eine URL geladen, wobei der URL-Parameter in der URL des Bildes übergeben wird und fn die Rückrufmethode ist, die die Parameter eines Bildobjekts enthält. Der Code lautet wie folgt:

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

2. imagetoCanvas(image) konvertiert ein Image-Objekt in ein Canvas-Objekt, wobei der Bildparameter in an übergeben wird Bildobjekt, der Code lautet wie folgt:

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) wird komprimiert und konvertiert ein Canvas-Objekt in ein Blob-Objekt; der Qualitätsparameter wird in einem Zahlentyp von 0-1 übergeben, der die Bildkomprimierungsqualität angibt, die die Parameter von a enthält Blob-Objekt; der Code lautet wie folgt:

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

Das Blob-Objekt stellt hier unveränderliche Rohdaten dar, ähnlich einem Dateiobjekt. Blobs stellen Daten dar, die nicht unbedingt in JavaScript nativer Form vorliegen. Die Dateischnittstelle basiert auf Blob, übernimmt die Funktionalität von Blob und erweitert sie, um Dateien auf dem System des Benutzers zu unterstützen. Wir können es als Dateityp behandeln. Weitere Informationen zur spezifischeren Verwendung finden Sie im MDN-Dokument

4. canvasResizetoDataURL(canvas,quality) komprimiert ein Canvas-Objekt in eine dataURL-Zeichenfolge, in der der Canvas-Parameter enthalten ist wird in einem Canvas-Objekt übergeben; der Qualitätsparameter wird in einem Zahlentyp von 0-1 übergeben, der die Bildkomprimierungsqualität angibt. Der Code lautet wie folgt:

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

Informationen zur toDataURL-API finden Sie im MDN-Dokument

5. filetoDataURL(file,fn) konvertiert die Datei vom Typ Datei (Blob) in eine Daten-URL-Zeichenfolge Der Dateiparameter wird in einer Datei vom Typ Datei (Blob) übergeben. fn ist die Rückrufmethode, die einen dataURL-Zeichenfolgenparameter enthält:

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

6. dataURLtoImage(dataurl,fn) konvertiert eine Zeichenfolge von dataURL-Zeichenfolgen in eine Bildtypdatei, in der der dataurl-Parameter in einer dataURL-Zeichenfolge übergeben wird. fn ist die Rückrufmethode, einschließlich der Parameter einer Bildtypdatei lautet der Code wie folgt:

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

7. dataURLtoFile(dataurl) konvertiert eine Zeichenfolge von dataURL-Strings in Objekte vom Typ Blob, wobei der dataurl-Parameter in einem dataURL-String übergeben wird, lautet der Code wie folgt:

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. Weitere Kapselung

Um ein Dateiobjekt zu komprimieren und es dann in ein Dateiobjekt umzuwandeln, können wir die obige Methode erneut kapseln. beziehen Sie sich auf den folgenden Code:

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

Dabei wird der Dateiparameter in einer Datei vom Typ Datei (Blob) übergeben; Der Qualitätsparameter wird im Zahlentyp 0-1 übergeben und gibt die Bildkomprimierungsqualität an. fn ist die Rückrufmethode, einschließlich der Parameter einer Blob-Datei.

Es funktioniert so:

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

Auf diese Weise können Bilder einfach komprimiert und hochgeladen werden Fertig. Ich habe die oben genannten 8 Methoden gepackt und auf Github gestellt. Wenn es Ihnen gefällt, können Sie es markieren.

ps: Schauen wir uns an, wie man Bilder mit dem JS-Verhältnis komprimiert

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

Zusammenfassung

Das Obige ist eine Zusammenfassung der vom Herausgeber eingeführten Bildkomprimierungsmethoden in JS. Ich hoffe, dass sie hilfreich ist an alle!

Verwandte Empfehlungen:

JS-komprimierte hochgeladene Bilder

JS-Bildkarussell-Beispielcode für manuelle Umschalteffekte

Beispiel zum Vorladen eines JS-Bildes

Das obige ist der detaillierte Inhalt vonZusammenfassung der Bildkomprimierungsmethoden in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!