Как сжать загруженное изображение для предварительного просмотра с использованием данных: формат 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);" />