javascriptimage-resizingimage-compressionhermite

Resize & compress uploaded image in JavaScript

I'm building a website which will have a lot of user uploaded images. I would like to resize and compress (preferably change their format to .jpg) these images client side, before uploading them to a server.

How would one go about doing this? I have found a few solutions, but none that really work on uploaded files. The latest I've tried is the Hermite-resize script. Should be as simple as:

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


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

But apparently the uploadedImages return as null. While I'm also using them elsewhere, so I'm 100% positive they are not null Does anyone know how to use this script effectively with uploaded files? Or is there, perhaps, a better solution to resize/compress images on the client side?

Thanks in advance!

Solution

  • I have found a (sort of) solution to my problem. It's not going to be good for everyone, but this guy wrote a little script that is perfect for what I'm trying to accomplish:

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

    Works straight out of the box! The only thing I added was to give the returned blob a timestamp and its original name before pushing it to an array:

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