Пытаюсь загрузить текст внутри замаскированного изображения ⇐ CSS

[Гость]

Я пытаюсь загрузить замаскированную фотографию черного цвета и заполнить пространство текстом. Я хочу, чтобы текст реагировал на форму изображения и чтобы на фотографии отображалось все содержимое txt-файла. вот код

Для создания этого кода я использовал толькоchatgpt, так как все еще учусь. Я ожидаю, что он поместит содержимое моего txt-файла и отобразит его внутри черного пространства изображения.

Текст с черными пробелами .контейнер { положение: относительное; отображение: встроенный блок; } #изображение { позиция: абсолютная; верх: 0; слева: 0; z-индекс: 1; } #svg-контейнер { позиция: абсолютная; верх: 0; слева: 0; ширина: 100%; высота: 100%; z-индекс: 2; события указателя: нет; } #текст { размер шрифта: 20 пикселей; семейство шрифтов: Arial, без засечек; заливка: белая; }

document.addEventListener("DOMContentLoaded", function() { const image = document.getElementById("изображение"); const svgText = document.getElementById("текст"); const fileInput = document.getElementById("fileInput"); fileInput.addEventListener("изменение", function() { константный файл = this.files[0]; константный читатель = новый FileReader(); reader.onload = функция (событие) { константный текст = event.target.result; svgText.textContent = текст; } читатель.readAsText(файл); }); const originalImage = новое изображение(); originalImage.src = image.src; originalImage.onload = функция() { const Canvas = document.createElement("холст"); холст.ширина = оригинальноеизображение.ширина; холст.высота = оригинальноеизображение.высота; const ctx = Canvas.getContext("2d"); ctx.drawImage(originalImage, 0, 0); const imageData = ctx.getImageData(0, 0, холст.ширина, холст.высота); константные пиксели = imageData.data; for (пусть я = 0; я < пикселей.длина; я += 4) { const r = пикселей [я]; const g = пикселей[i + 1]; const b = пикселей[i + 2]; if (r === 0 && g === 0 && b === 0) { пикселей = 255; пикселей[я + 1] = 255; пикселей[я + 2] = 255; пикселей[я + 3] = 0; } } ctx.putImageData(imageData, 0, 0); const newDataUrl = Canvas.toDataURL(); image.src = новыйDataUrl; } });