Die beste Methode, um ein Bild zu komprimieren Javascript React Web App

Question

Ich bin auf der Suche nach der besten Lösung, um Bilder zu komprimieren, die ich erhalte und in meiner Datenbank speichern muss.

Eigentlich konvertiere ich ein Bild in base64 und dann an den Server senden.

handleImage = e => { 
    e.preventDefault(); 
    let reader = new FileReader(); 
    let file = e.target.files[0]; 

    reader.onloadend =() => {   
     this.setState({ 
      file: file, 
      image: reader.result 
     }); 
    } 

    this.setState({ imgchange: true }) 
} 

Und dann senden Sie das aktuelle Bild im Zustand an den Server. Aber mit dem Bild niedriger Qualität ist es in Ordnung, aber wenn ich versuche, eine Qualität von mittlerer Qualität hochzuladen, kann ich es nicht auf dem Server speichern, ich brauche eine Methode, um das Bild zu komprimieren.

Haben Sie eine Idee, dies zu erreichen? Kannst du mir ein Beispiel zeigen?

Answer 1

Ich habe dies in einer React/Redux-App zuvor mit Bildbibliotheken gemacht, die schließlich eine komprimierte JPG-Datei erzeugen - wenn das für Sie funktioniert, dann ist die Verwendung von etwas wie Jimp eine Option. Es wurde für den Knoten gemacht, aber ich installierte es für den Einsatz in der browser, und verwendet es etwa so:

Jimp.read('image.jpg').then((image) => { 
    if (image.bitmap.data.length > MAX_IMAGE_SIZE) { 
    image.quality(80); // some value of 'quality' 
    } 
    // do something else with the image 
}); 

Sie können einige die richtige Qualität der JPG, um herauszufinden, tun das Hantieren, was für Ihre Anwendung richtig ist, und Dementsprechend anpassen.

Wenn ich dies verwendet habe, habe ich zusammen eine onDrop Funktion, die Bilder verarbeitet wie Sie - ich werde nicht garantieren, dass dieser Code ist super sauber oder super effizient - es kam von einem Wegwerf-Prototyp - aber es sollte Fangen Sie auf dem richtigen Weg an:

handleFileDrop(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 

     var file = e.dataTransfer.files[0]; 

     var reader = new FileReader(); 
     reader.onload = (function(inputFile) { 
     return function(e) { 
      var imageBlob = new Blob([e.target.result], {type: inputFile.type}); 
      var src = URL.createObjectURL(imageBlob) 
      Jimp.read(src, (err, image) => { 
       // do stuff here 
      }); 
     })(file); 

     reader.readAsArrayBuffer(file); 
}