Управление HTML DOM с ванильным JavaScript

Авторизоваться

Предположим, что мы хотим изменить размер изображения до заданного количества процентов. Изображение можно определить в инпуте file:

// A file input
<input type="file" id="upload" />

// Get the selected file
const image = document.getElementById('upload').files[0];

Следующая функция масштабирует image файл до ratio процентов:

const resize = function(image, ratio) {
    return new Promise(function(resolve, reject) {
        const reader = new FileReader();

        // Read the file
        reader.readAsDataURL(image);

        // Manage the `load` event
        reader.addEventListener('load', function(e) {
            // Create new image element
            const ele = new Image();
            ele.addEventListener('load', function() {
                // Create new canvas
                const canvas = document.createElement('canvas');

                // Draw the image that is scaled to `ratio`
                const context = canvas.getContext('2d');
                const w = ele.width * ratio;
                const h = ele.height * ratio;
                context.drawImage(ele, 0, 0, w, h);

                // Get the data of resized image
                ('toBlob' in canvas)
                    ? canvas.toBlob(function(blob) {
                        resolve(blob);
                    })
                    : resolve(dataUrlToBlob(canvas.toDataURL()));
            });

            // Set the source
            ele.src = e.target.result;
        });

        reader.addEventListener('error', function(e) {
            reject();
        });
    });
};

В примере кода выше, после нанесения нового изображения, мы должны проверить, если текущий браузер поддерживает холст toBlobметод.

Если нет, сначала нужно получить URL-адрес данных canvas.toDataURL(), а затем использовать следующую функцию для преобразования его в BLOB-объект:

const dataUrlToBlob = function(url) {
    const arr = url.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const str = atob(arr[1]);
    let length = str.length;
    const uintArr = new Uint8Array(length);
    while (length--) {
        uintArr[length] = str.charCodeAt(length);
    }
    return new Blob([uintArr], { type: mime });
};

Как только у нас есть BLOB-объект с измененным размером изображения, мы можем предварительно просмотреть его на внешнем интерфейсе или отправить на внутренний сервер как часть FormData:

// Resize image to 50%
resize(image, 0.5).then(function(blob) {
    // Preview
    // Assume that `previewEle` represents the preview image element
    previewEle.src = URL.createObjectURL(blob);
});

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?