Прозрачные изображения становятся непрозрачными после загрузки с помощью программы чтения файлов

#javascript #image

Вопрос:

Я использую приведенный ниже код для просмотра изображений на ПК, а затем показываю их в браузере на своей странице. Он показывает изображения, но пиксели, которые должны быть прозрачными, просто белые или серые, он просто не учитывает альфа-канал. Есть ли какой-нибудь способ как-то это исправить? Я действительно не понимаю весь механизм загрузки изображений в JS, если я загружаю явно с относительным путем, указанным в файлах css или html, то он работает нормально, но при использовании этого метода по какой-то причине он не работает должным образом с прозрачностью.

 BLOCK_PICTURE.addEventListener("click", function (e) {
    if (!currentElement) return;
    let input = document.createElement("input");
    input.type = "file";
    input.addEventListener("change", function () {
        const reader = new FileReader();
        reader.addEventListener("load", function () {
            mainImage = reader.resu<
            document.getElementById(currentElement.name).style.backgroundImage = `url(${mainImage})`;
            blocks[currentElement.count].background = mainImage;
        });
        reader.readAsDataURL(this.files[0]);
    });
    input.click();
});