Как сжать загруженное изображение для предварительного просмотра, используя данные: формат URL?

Question

Я знаю, что данные:URL может предоставлять изображения размером не более 2 МБ, кроме того, он увеличивает размер изображения на 33%. Поэтому мне нужно сжать загруженное изображение перед предварительным просмотром. Пожалуйста, скажите мне - как я могу это сделать?

Answer 1

Использование URL.createObjectURLвместо этого, убедившись, чтоrevokeObjectURLкогда вам больше не нужно изображение:

'use strict';

var fileInput = document.getElementById('file');
var preview = document.getElementById('preview');

fileInput.addEventListener('change', function () {
    if (this.files.length === 0) {
        return;
    }
  
    preview.src = URL.createObjectURL(this.files[0]);
});

<input id="file" type="file" accept="image/*" />
<img id="preview" style="display: block; margin: 1em 0; max-width: calc(100% - 2em);" />