Größe ändern und komprimiertes Bild in JavaScript konvertieren

Question

Ich baue eine Website mit vielen hochgeladenen Bildern. Ich möchte diese Bilder clientseitig skalieren und komprimieren (vorzugsweise ihr Format zu .jpg ändern), bevor ich sie auf einen Server hochlade.

Wie würde man das machen? Ich habe ein paar Lösungen gefunden, aber keine, die wirklich auf hochgeladene Dateien funktionieren. Das letzte, was ich versucht habe, ist das Hermite-resize Skript. Sollte so einfach wie:

// Get images from input field 
var uploadedImages = event.currentTarget.files; 


var HERMITE = new Hermite_class(); 
HERMITE.resize_image(uploadedImages[1], 300, 100); 

Aber anscheinend die uploadedImages Rückkehr als null. Während ich sie auch woanders benutze, bin ich 100% positiv, sie sind nicht null Kann jemand dieses Skript effektiv mit hochgeladenen Dateien verwenden? Oder gibt es vielleicht eine bessere Lösung zum Vergrößern/Komprimieren von Bildern auf der Client-Seite?

Vielen Dank im Voraus!

Answer 1

Ich habe eine (Art) Lösung für mein Problem gefunden. Es wird nicht für alle gut sein, aber dieser Kerl ein kleines Skript geschrieben, das für perfekt ist, was ich versuche zu erreichen:

https://stackoverflow.com/a/39235724/6756447

Arbeiten direkt aus der Box! Die einzige Sache, die ich hinzufügte, war, dem zurückgegebenen Blob einen Zeitstempel und seinen ursprünglichen Namen zu geben, bevor es zu einem Array geschoben wurde:

var images = event.currentTarget.files 

resizeImage({ 
    file: images[i], 
    maxSize: 500 
}).then(function(resizedImage) { 
    resizedImage.lastModifiedDate = new Date() 
    resizedImage.name = images[i].name 
    uploadedImages.push(resizedImage) 
}).catch(function(error) { 
    console.log(error) 
}) 

Answer 2

ich auf hermite zu arbeiten haben versucht, aber es ist nicht gut, Klasse, weil es Fehler gibt mir ständig damit können Sie unter Code verwenden, auf fiddle, auch Eremit Klasse will

Element id

HTML img

<input type="file" id="fileOpload"><br> 
<img src="" alt="Image preview..." id="image"> 
<canvas id="canvas" height=500 width=500></canvas> 

Javascript

function previewFile() { 
    var preview = document.querySelector('img'); 
    var file = document.querySelector('input[type=file]').files[0]; 
    var reader = new FileReader(); 
    var percentage = 0.75; 
     reader.addEventListener("load", function() { 
      preview.src = reader.result; 
      preview.onload = function() { 
       var canvas = document.getElementById("canvas"); 
       var ctx = canvas.getContext("2d"); 
       canvas.height = canvas.width * (preview.height/preview.width); 
       var oc = document.createElement('canvas'),octx = oc.getContext('2d'); 
       oc.width = preview.width * percentage; 
       oc.height = preview.height * percentage; 
       canvas.width = oc.width; 
       canvas.height = oc.height; 
       octx.drawImage(preview, 0, 0, oc.width, oc.height); 
       octx.drawImage(oc, 0, 0, oc.width, oc.height); 
       ctx.drawImage(oc, 0, 0, oc.width, oc.height,0, 0, canvas.width, canvas.height); 
      } 
     }, false); 

    if (file) { 
     reader.readAsDataURL(file); 
    } 
} 
document.getElementById('fileOpload').addEventListener('change', previewFile);