Загрузка останавливается с определенным двоичным контентом [закрыто] ⇐ Javascript

[Anonymous]

У меня есть простое веб-приложение для редактирования изображений, которое позволяет пользователю добавлять изображение, масштабировать и перемещать его внутри холста, а затем отправлять сглаженную и индексированную версию на экран запуска ESP32. Но в этот момент файл только сохраняется, а не отображается.
Во время тестирования я заметил, что загрузка некоторых изображений останавливается примерно на 20%. Это происходит, когда изображения масштабируются для заполнения холста и, следовательно, выравниваются по левому краю (без горизонтальной обрезки, холст/экран широкоэкранный). Проблема не возникнет, если я немного увеличу масштаб, чтобы левая и правая стороны были немного обрезаны. Таким образом, этот особый случай вызывает проблемы в дальнейшем, которые в конечном итоге приводят к остановке загрузки. Однако сейчас это на самом деле не важно, так что давайте сразу забудем об этом.
Все, что я показываю вам сейчас, находится внутри saveButton.addEventListener("click", () => {..., который при нажатии выполняет всю обработку и запускает загрузку. Фактическое странное поведение начинается здесь:
Это форма, которую мы отправляем xhr.send(formDataIndex):

Код: Выделить всё

const formDataIndex = new FormData();
formDataIndex.append("save_path", savePathIndexed);
formDataIndex.append("original_name", indexedFileName);
formDataIndex.append("index", indexBlob, indexedFileName);

и мы получаем indexBlob из

Код: Выделить всё

const indexBlob = new Blob([highResIndexBuffer.buffer], { type: "application/octet-stream" });

и highResIndexBuffer из

Код: Выделить всё

for (let y = 0; y < scaledHeight; y++) {
for (let x = 0; x < scaledWidth; x++) {
let srcIdx = y * scaledWidth + x;
let dstIdx = (scaledOffsetY + y) * 2560 + (scaledOffsetX + x);
highResIndexBuffer[dstIdx] = imageIdxBuffer[srcIdx]; // Copy indexed pixel data
}
}

который копирует только значения из imageIdxBuffer в highResIndexBuffer. В моих тестах, где загрузка не удалась, оба буфера имеют одинаковый размер и все значения копируются.
Теперь вот где мы получаем imageIdxBuffer:

Код: Выделить всё

let imageIdxBuffer = new Uint16Array(scaledWidth * scaledHeight).fill(blackIdx);
applyDithering(scaledCtx, imageIdxBuffer);

Код: Выделить всё

applyDithering

является внешним (

Код: Выделить всё

import { applyDithering, invertImage } from "./dither.js";

), и я не уверен, может ли это способствовать возникновению проблемы. Единственная строка в applyDithering, где мы используем этот массив, — это

Код: Выделить всё

imageIdxBuffer[pixIndex] = paletteIndex;

В любом случае, в тех особых случаях, о которых я упоминал выше, использование этого imageIdxBuffer после применения Dithering приведет к остановке загрузки примерно на 20 %. На самом деле это будет продолжаться ОЧЕНЬ медленно, примерно до 40%, где оно наконец остановится. Окончательный размер загрузки составляет примерно 7 МБ (всегда один и тот же) и обычно завершается примерно за минуту. Однако если я просто воссоздаю imageIdxBuffer после applyDithering вот так:

Код: Выделить всё

imageIdxBuffer = new Uint16Array(scaledWidth * scaledHeight).fill(blackIdx);

или даже так:

Код: Выделить всё

imageIdxBuffer.fill(blackIdx);

он ​​не глохнет. И вот тут я в растерянности. Это похоже на проблему с данными, но я не обрабатываю никаких данных, я отправляю blob на ESP32, который только сохраняет полученные данные в хранилище. Я также попробовал заполнить массив случайными данными, и это работает отлично.
Так что же происходит с imageIdxBuffer, что может вызвать такие проблемы? И как эти проблемы можно скопировать в highResIndexBuffer? Я провел тесты, не копируя все данные, и действительно, при копировании определенного количества байт проблем не возникает. Случайные данные также не вызывают проблем.
Важно еще раз отметить, что данные никак не обрабатываются! ESP32 сохраняет только полученные данные во внутреннюю память.

Код: Выделить всё

                while True:
chunk = await data.read(1024)
if not chunk:
break
bytes_written += f.write(chunk)

ChatGPT тоже не помог. Он предложил
"последовательности байтов, которые приводят к зависанию процесса сериализации Blob", что звучит просто глупо. Это также предполагало проблемы с памятью, но я не понимаю, почему это также повлияет на копии. Кстати, ошибок JS нет.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ry-content