Рендеринг прогрессивного изображения в прогрессивной манере - PullRequest
Новая
       9

Рендеринг прогрессивного изображения в прогрессивной манере

9 голосов
/ 09 мая 2019

Я преобразовал загруженное изображение в прогрессивный в бэкэнде, используя Node GM и сохранил в файле.После этого я хочу показать, что преобразуются прогрессивные изображения в front-end.Моя проблема в том, что когда я рендерил это изображение, оно получалось построчно.Но по сравнению с обычным изображением эти прогрессивные изображения загружаются первыми.

Но я хочу загрузить эти изображения от размытия до нормального.Как я могу это сделать?

В интерфейсе я написал код, используя HTML, как это. 

<html>
<head></head>

<body>
    <h1>Hello</h1>
    <img style="width:50%" src="https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1" />
    <img style="width:30%" src="https://www.dropbox.com/s/3nnc03tfwxrpu5q/Porsche-GT2-4K-UHD-Wallpaper.jpg?raw=1" />
</body>

</html>

Ответы [ 3 ]

1 голос
/ 17 мая 2019

Вам нужно иметь два изображения

  1. Большое изображение
  2. Маленькое изображение

Нужно поставить 

<img id="image" style="width:100%, height: auto; filter: blur(5px); transition: 1s filter linear;" src="small image source" />

затем сделайте 

fetch('big image source').then((response) => response.blob()).then((blob) => {
   let img = document.querySelector('#image');
   img.onload = () => URL.revokeObjectUrl(img.src)
   img.src = URL.createObjectUrl(blob)
   img.style.filter = 'none';
})
0 голосов
/ 16 мая 2019

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

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

Проблема в том, что изображение настолько велико, более 5000 пикселей в ширину, что его размер изменяется в браузере до такой степени, что видимого улучшения качества изображения после загрузки исходного изображения не происходит.

Чтобы эффект от размытия до резкости был заметен, изображение должно быть намного меньше по размерам в пикселях. Если он встроен в веб-страницу, измените его размер до максимально возможного размера, при котором он будет просматриваться, поэтому при ширине экрана 50% на экране шириной 1920 г. вы захотите изменить его до 960 пикселей по ширине. Теперь размер файла также будет намного меньше, и изображение будет загружаться быстрее, поэтому, если вы не используете очень медленное соединение, все еще может быть неочевидно, что jpeg загружается постепенно.

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

Например. <a href="https://www.dropbox.com/s/p57ik1kl04k1iax/progressive3.jpg?raw=1">Print quality image (11.1 MB)</a>

0 голосов
/ 13 мая 2019

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

Но можно смоделировать этот эффект, разместив несколько копий вашего изображения (с различным разрешением) и загружая все эти файлы один за другим..

Вот статья о том, как это делает Medium.

Также может пригодиться lazysizes . Вот пример использования lazysizes .Если вы посмотрите вкладку сети на этой странице, вы фактически увидите два разных размера одного и того же изображения, запрашиваемого одновременно.

...