Предпросмотр изображений и веб-работники

Question

Можно ли использовать веб-пользователя filereader api для загрузки изображений, например, для превью/эскизов, что предотвращает блокировку основного потока ui.

Что-то вроде this но обертывание ресурсоемких частей (в основном чтения содержимого файлов и масштабирования изображения) в вебе-работнике

Answer 1

От работника это не представляется возможным получить доступ к уровню DOM на страницах, так что вы не можете создать объект изображения или холст (для части масштабирования), поэтому ответ отсутствует, так как вы хотите манипулировать изображением.

Возможно, однако, чтобы загрузить файлы изображений веб-работника с помощью ajax или FileReaderSync, преобразуйте его в строку url данных base64 и отправьте ее обратно в основной скрипт, но нет возможности манипулировать изображением в для создания ваших эскизов. (если вы не знаете спецификацию файла для форматов png/jpg/bmp и хотите жестко кодировать функцию масштабирования, работающую непосредственно на двоичной строке, не выглядит так хорошо?)

Answer 2

Основной поток называется потоком пользовательского интерфейса, потому что все связанный с пользовательским интерфейсом, должен произойти там. Вы не можете манипулировать DOM в Web Worker, но вы можете манипулировать двоичным файлом образа внутри веб-рабочего. После манипуляции с изображениями вы должны перенести данные в основной поток и присоединить его к DOM. Затем браузер отобразит это изображение в основном потоке.

Answer 3

Возможно, если возможно.

• Сделать запрос ajax от рабочего на сервер, установить responseType для arraybuffer и responseText для ответа.
• На сервере можно сказать, что PHP загружает запрошенное изображение в представление GD (createImageFromJpeg).
• Получите информацию о каждом пикселе (imagecolorat).
• Извлеките RGBA цвета, (упакуйте) каждый из них и добавьте их в строку.
• Отправьте эту строку обратно работнику.
• Создайте новый Uint8Array из ответа.
• Сделайте некоторые манипуляции.
• Заключить право собственности на основной сценарий.
• Добавить данные на холст.

Что читать: Sending Arraybuffer, Transferable Objects

Чтобы записать весь сценарий будет выходить за рамки.