Предварительный просмотр изображений и веб-работники - PullRequest
Новая
       24

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

2 голосов
/ 15 февраля 2012

Можно ли использовать API-интерфейс для чтения файлов внутри веб-работника для загрузки изображений, т. Е. Для предпросмотра / эскизов, что предотвращает блокировку основного потока пользовательского интерфейса.

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

Ответы [ 3 ]

4 голосов
/ 15 февраля 2012

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

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

2 голосов
/ 15 февраля 2012

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

1 голос
/ 12 января 2014

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

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

Что читать: Отправка массива , Переносимые объекты

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

...