Как загрузить часть изображения по требованию, как это делает GMap? - PullRequest
Новая
       32

Как загрузить часть изображения по требованию, как это делает GMap?

0 голосов
/ 29 июня 2018

У меня большое большое изображение, скажем, 1000 Мп (700 МБ). Как и карта определенной области, я хочу загрузить только определенную часть, если увеличить изображение. Это важно, чтобы сделать приложение эффективным для работы в сети.

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

Срезы сделаны в соответствии с уровнем масштабирования.

Но я не хочу этого делать. Есть ли эффективный и правильный способ сделать это, как это делает любая карта?

Ответы [ 3 ]

0 голосов
/ 06 июля 2018

Попробуйте layload-image :

Расширение HTMLImageElement для отложенной загрузки. Изображения будут загружены при отображении.

Установить lazyload-образ через npm или bower. 

# via npm 
$ npm install lazyload-image

# via bower 
$ bower install lazyload-image

Использование 

Load lazyload-image.html in your HTML.

<link rel="import" href="lazyload-image.html">
Modify your <img> elements such as following.

<img is="lazyload-image" src="path/to/your/image.jpg" offset="200" width="100" height="100"
0 голосов
/ 10 июля 2018

Отмечая, что вы не хотите, чтобы логика управлялась бэкэндом / отложенной загрузкой, я мог бы рекомендовать подход с использованием Потоки объектов .

Подход:

  1. Возьмите свое большое изображение и разбейте на более мелкие [Как вы уже делаете]
  2. Упакуйте их в массив так, чтобы сначала использовались изображения по умолчанию для увеличения, а затем для каждого уровня увеличения +/-. Допустим, кадр из 10 изображений составляет вид. Затем вы упаковываете изображения таким образом:
    • Рамка из 10 при увеличении 0
    • Рамка из 10 при увеличении + 10
    • Рамка из 10 при увеличении -10
    • Рамка из 10 при увеличении + 20
    • Рамка из 10 при увеличении -20
  3. Используйте библиотеку потоковой передачи объектов, такую ​​как Stream-JSON , чтобы начать отправку изображений с сервера на клиент.
  4. На клиенте получите кадры и сохраните их в памяти, чтобы показать, когда пользователь выполняет панорамирование / масштабирование.

Ключевое отличие состоит в том, что данные загружаются не по-ленивому, поскольку для получения требуемых изображений не требуется, чтобы пользователь увеличивал или уменьшал масштаб. Кадры достаточно загружены в память, чтобы дать пользователю минимальное время ожидания, т. Е. Оптимизировано для времени, а не для памяти.

Всего наилучшего. Надеюсь это поможет. Дайте мне знать, если требуется более детальная реализация.

0 голосов
/ 04 июля 2018

Некоторые услуги, статьи и рамки:

Если вы воспользуетесь Google "slippy map nodejs", вы найдете множество готовых к использованию серверов плиток

...