Изменение размера и сжатие загруженного изображения в JavaScript

Question

Я создаю веб-сайт, на котором будет много загруженных пользователем изображений. Я хотел бы изменить размер и сжать (желательно изменить их формат на.jpg) эти изображения на стороне клиента, прежде чем загружать их на сервер.

Как можно это сделать? Я нашел несколько решений, но ни одно из них действительно не работает с загруженными файлами. Последнее, что я попробовал, это сценарий с изменением размера Hermite. Должно быть так просто, как:

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


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

Но, видимо, uploadedImages вернуть как null, Хотя я также использую их в другом месте, так что я на 100% уверен, что они не nullКто-нибудь знает, как эффективно использовать этот скрипт с загруженными файлами? Или, может быть, есть лучшее решение для изменения размера / сжатия изображений на стороне клиента?

Заранее спасибо!

Answer 1

Я нашел (своего рода) решение моей проблемы. Это не будет хорошо для всех, но этот парень написал небольшой сценарий, который идеально подходит для того, чего я пытаюсь достичь:

/questions/1422351/ispolzujte-html5-dlya-izmeneniya-razmera-izobrazheniya-pered-zagruzkoj/1422360#1422360

Работает прямо из коробки! Единственное, что я добавил, это передал возвращаемому блобу временную метку и ее оригинальное имя, прежде чем отправить ее в массив:

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

Я пытался работать с hermite, но это не очень хороший класс, потому что он постоянно дает мне ошибку, поэтому вы можете использовать приведенный ниже код, на скрипке, также класс hermit хочет img id элемента

HTML

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