Скачать небольшую версию огромного изображения - на стороне клиента - без функции бэкенда - javascript

Question

Можно ли загрузить изображения разных размеров?

Например, у меня есть изображение 3000 * 3000 px: https://via.placeholder.com/3000x3000

Так что, когда мой код JavaScript запускается в Android, мы простонужно 1000 * 1000 изображений.Я знаю, что можно изменить размер этого изображения после загрузки (например, с помощью canvas).

Но возможно ли загрузить небольшую версию этого изображения без запуска кода в бэкэнде?Просто на стороне клиента.

Answer 1

Я не думаю, что это возможно без внутреннего кода.Я предполагаю, что можно каким-то образом загрузить только часть прогрессивного JPEG, и это может выглядеть нормально при локальном сокращении.Обычно нетрудно добавить бэкэнд-код к конкретным размерам сервера.Это может работать так: https://via.placeholder.com/my_img.jpg?size=1000x1000

Я нашел несколько интересных идей здесь: Как загрузить часть прогрессивного изображения?

Answer 2

Исследуйте атрибут srcset - который используется для предоставления различных источников изображений.Атрибут srcset указывает URL-адрес изображения, которое будет использоваться в различных ситуациях.

So, with these attributes in place, the browser will:

Look at its device width.
Work out which media condition in the sizes list is the first one to be true.
Look at the slot size given to that media query.
Load the image referenced in the srcset list that most closely matches the slot size.

Ниже приведены значения https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

...

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

...

Однако мы можем использовать два новых атрибута - srcset и размеры - чтобы предоставить несколько дополнительных исходных изображений вместе с подсказками, которые помогут браузеру выбрать правильный.Вы можете увидеть пример этого в нашем примере responseive.html на Github (см. Также исходный код):

Атрибуты srcset и sizes выглядят сложными, но их не так уж плохо понять, если вы отформатируете ихкак показано выше, с различной частью значения атрибута в каждой строке.Каждое значение содержит список, разделенный запятыми, и каждая часть списков состоит из трех частей.Давайте теперь рассмотрим содержимое каждого из них:

srcset определяет набор изображений, которые мы позволим браузеру выбирать, и какой размер у каждого изображения.Перед каждой запятой пишем:

Имя файла изображения (elva-fairy-480w.jpg.) Пробел.Ширина изображения в пикселях (480 Вт) - обратите внимание, что здесь используется единица w, а не px, как вы могли ожидать.Это реальный размер изображения, который можно узнать, просмотрев файл изображения на вашем компьютере (например, на Mac вы можете выбрать изображение в Finder и нажать Cmd + I, чтобы открыть информационный экран.) Размеры определяют наборусловий мультимедиа (например, ширины экрана) и указывает, какой размер изображения лучше выбрать, когда выполняются определенные условия мультимедиа - это те подсказки, о которых мы говорили ранее.В этом случае перед каждой запятой мы пишем

условие носителя ((max-width: 480px)) - вы узнаете больше об этом в теме CSS, но сейчас давайте просто скажем, что условие носителяописывает возможное состояние, в котором может находиться экран. В этом случае мы говорим «когда ширина области просмотра составляет 480 пикселей или меньше».Пространство.Ширина слота, который будет заполнять изображение, когда условие носителя будет истинным (440 пикселей.)