Эффективный предварительный просмотр большого изображения с минимальным потреблением оперативной памяти

Question

Я хочу загрузить на сервер очень большое изображение с HTML, используя чистое JS.

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

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

У меня есть код, который выбирает файл, использует FileReader и устанавливает img sr c к его результату onload:

function read_url(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = (e) => {
            document.getElementById("img_"+input.id).src = e.target.result;
        };

        reader.readAsDataURL(input.files[0]);
    }
}

Это работает для изображений нормального размера, но для изображений с 33000x33000 пикселей это не удается (по крайней мере, на Chrome) - на Chrome 74.0 64-битная память вкладки взрывается, пока вкладка не падает перед отображением изображения, хотя стиль элемента img гарантирует, что он будет отображаться как изображение размером 300x300, тогда как на Chrome 80.0 64-битная она просто показывает поврежденное изображение вместо его отображения (лучше, чем сбой, но без предварительного просмотра).

Я также попытался создать изображение и минимизировать его отображение на холсте, как описано здесь , но это не работает так же ... На Chrome 80.0 img.onload не вызывается для большого изображения (оно работает для небольших изображений).

Так что мне нужно найти способ сохранить изображение сжатым (где требуется всего 700 МБ вместо 3 ГБ), но при этом можно будет просматривать миниатюрный предварительный просмотр.

Изменение размера интерполяции ближайшего соседа достаточно хорошее, но я не уверен, как получить доступ к пикселям сжатого изображения, не распаковывая его и не взрывая память ... Можно ли распаковать его на диск, и читать это с диска? Он сжат в формате PNG.

Любые другие идеи также приветствуются.