Сжатие изображения перед загрузкой с помощью javascript

Я пишу кросс-платформенное мобильное приложение с помощью phonegap, и у меня есть вход для загрузки файлов для загрузки изображений одного изображения.

Проблема заключается в том, что большинство загружаемых изображений взяты с использованием мобильного телефона размером около 4 МБ.

Я хочу резко сжать эти изображения, так как я не нуждаюсь в них в высоком качестве вообще.

Кроме того, мне нужно, чтобы они были преобразованы в base64, а не в файл реального изображения. (Что у меня уже есть FileReader)

Любые идеи, как достичь этого? Может быть, использовать холст или что-то еще?

Update: вот что я до сих пор:

function shrink() {
    var self = this;

    var reader = new FileReader(); // init a file reader
    var file = $('#file-input').prop('files')[0]; // get file from input

    reader.onloadend = function() {

        // shrink image
        var image = document.createElement('img');
        image.src = reader.result;

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, 300, 300);
        var shrinked = canvas.toDataURL('image/jpeg');
        console.log(shrinked);
    };

    reader.readAsDataURL(file); // convert file to base64*/
}

но все, что я получаю, это черное изображение Благодаря

Ответ 1

Нашел ответ.

Проблема заключалась в том, что я не ожидал, пока изображение будет полностью загружено, прежде чем рисовать его.

после добавления

image.onload = function() {

}

и запустил все, что в нем работает.

Ответ 2

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

       navigator.camera.getPicture(function (imageURI) {
           console.log("*** capture success. uri length...", imageURI.length);            
           var image = document.createElement('img');
           image.onload = function() {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                ctx.drawImage(image, 0, 0, 300, 300);
                var shrunk = canvas.toDataURL('image/jpeg');
                console.log(shrunk);
                // used shrunk here
            }
            image.src = imageURI; // triggers the onload
       }

погладить