JаvaScript: Изменение размера изображения с помощью Canvas и Base64

Обычно, когда вы реализуете загрузку изображения, вы хотите изменить размер изображения перед загрузкой. Итак, давайте объясним, как изменить размер изображения и преобразовать его в контент base64.

В этом руководстве вы узнаете, как изменить размер изображения с помощью jаvascript. Здесь вы узнаете, как изменить размер изображения, и покажете предварительный просмотр с изменением размера изображения. 

Как изменить размер изображения с помощью Canvas и преобразовать в строку с кодировкой Base64 (Data URLs) и Blob в jаvascript

Изменить размер изображения с помощью jаvascript довольно просто. Возьмем для примера этот код:

Он показывает предварительный просмотр изменения размера изображения. 

Создадим HTML 

<input id="imageFile" name="imageFile" type="file" class="imageFile"  accept="image/*" /> 
<input type="button" value="Resize Image"  onclick="ResizeImage()" /> 
<br>
<img src="" id="preview">
<img src="" id="output">

Внедрим код jаvascript для изменения размера изображения 

$(document).ready(function() {
 
    $('#imageFile').change(function(evt) {
 
        var files = evt.target.files;
        var file = files[0];
 
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});
 
function ResizeImage() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var filesToUploads = document.getElementById('imageFile').files;
        var file = filesToUploads[0];
        if (file) {
 
            var reader = new FileReader();
            // Set the image once loaded into file reader
            reader.onload = function(e) {
 
                var img = document.createElement("img");
                img.src = e.target.result;
 
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
 
                var MAX_WIDTH = 400;
                var MAX_HEIGHT = 400;
                var width = img.width;
                var height = img.height;
 
                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, width, height);
 
                dataurl = canvas.toDataURL(file.type);
                document.getElementById('output').src = dataurl;
            }
            reader.readAsDataURL(file);
 
        }
 
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }
}

Изменение размера изображения при помощи jаvascript; В этом руководстве вы узнали, как изменить размер изображения в jаvascript и как преобразовать изображение с измененным размером в содержимое base64.