Java, UX, HTML, CSS, WEB-design

Управление точками останова изображения с помощью Angular

Краткое описание по статье Управление точками останова изображения с помощью Angular

Название: Управление точками останова изображения с помощью Angular . Краткое описание: ⭐ Тамас Пиро . Дата публикации: 25.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


  • Тамас Пирос

  • 0 Комментарии

Управление точками останова изображения с помощью Angular

  • 9 минут чтения

  • JavaScript, Angular, Медиа, Адаптивные изображения

Краткое резюме ↬

Встроенная функция Angular под названием BreakPoint Observer предоставляет нам мощный интерфейс для работы с адаптивными изображениями. Давайте рассмотрим сервис, который позволяет нам обслуживать, преобразовывать и управлять изображениями в облаке. Наличие в наших руках таких убедительных инструментов помогает нам создавать иммерсивные визуальные веб-приложения без потери посетителей.

Как веб-разработчикам, нам часто приходится создавать адаптивные приложения, а также мультимедийные приложения. Наличие таких требований означает, что нам нужно работать с точками останова изображений, а также с медиа-запросами, поскольку мы хотим предоставить конечным пользователям наилучшие возможности. В дополнение к списку требований нам может понадобиться использовать интерфейсную структуру, такую ​​​​как Angular, которая отлично подходит для создания SPA и других типов приложений.

В этой статье мы рассмотрим точки останова изображения, варианты их использования и практический пример; мы реализуем их в приложении Angular, используя собственный Angular BreakPoint Observer. Используя этот подход, мы также подчеркнем, почему этот популярный фреймворк помогает нам беспрепятственно работать с вышеупомянутыми методами.

Точки останова изображения и адаптивные изображения

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

Давайте обсудим два варианта, которые разработчики могут использовать на данный момент.

Еще после прыжка! Продолжить чтение ниже ↓

srcset

srcset позволяет нам определить список изображений, между которыми браузер переключается на основе отображаемого <img> Размер и плотность дисплея.

Давайте рассмотрим пример:

<img
  srcset="https://www.smashingmagazine.com/tuscany-sm.jpg 600w, https://www.smashingmagazine.com/tuscany-md.jpg 900w, https://www.smashingmagazine.com/tuscany-lg.jpg 1440w" sizes="100vw"
  src="https://www.smashingmagazine.com/2019/02/image-breakpoints-angular/tuscany.jpg" />

Выше мы указываем 3 изображения с w указывает ширину изображения в пикселях. При использовании вышеуказанного с srcset нам также необходимо указать sizes атрибут (это необходимо, потому что спецификация предписывает, что если мы используем srcset и w у нас также должен быть атрибут размеров). Какова цель этого атрибута? Браузеры должны выбрать, какой ресурс загрузить из исходного набора, прежде чем они разметят страницу (до того, как они узнают, насколько большим будет изображение). Мы можем думать о sizes как подсказка браузеру, что после верстки изображение будет занимать 100% ширины вьюпорта (вот что vw относится к). Браузер знает фактическую ширину области просмотра (а также DPR изображения) во время загрузки, поэтому он может вычислить, какой размер ресурса ему нужен, и выбрать один из исходного набора.

То <picture> и <source media=""> Комбинации элементов позволяют нам переключать ресурсы изображения в ответ на медиа-запросы, например, в точках останова макета.

Давайте также рассмотрим это на примере:

<picture>
    <source media="(min-width: 1440px)" srcset="https://www.smashingmagazine.com/../assets/images/tuscany-lg.jpg">
    <source media="(min-width: 900px)" srcset="https://www.smashingmagazine.com/../assets/images/tuscany-md.jpg">
    <source media="(min-width: 600px)" srcset="https://www.smashingmagazine.com/2019/02/image-breakpoints-angular/assets/images/tuscany-sm.jpg">
    <img src="https://www.smashingmagazine.com/2019/02/image-breakpoints-angular/assets/images/tuscany-sm.jpg" />
  </picture>

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

Ключевым выводом из всего вышесказанного является то, что если мы хотим поменять местами изображения в определенных точках останова, мы можем использовать <picture> элемент для размещения медиа-запросов прямо в разметке.

Примечание: Если вы заинтересованы в изучении различий между <picture> и srcset + sizes, Я рекомендую прочитать замечательную статью Эрика Портиса: srcset и sizes.

До сих пор мы обсуждали, как использовать точки останова изображения вместе с медиа-запросами в чистом HTML-окружении. Не было бы намного лучше иметь удобный, почти полуавтоматический способ создания точек останова изображения, а также соответствующих изображений для точек останова, даже без указания медиа-запросов? К счастью для нас, в Angular есть встроенный механизм, который поможет нам, и мы также рассмотрим динамическое создание соответствующих изображений на основе определенных условий с использованием стороннего сервиса.

Модуль углового макета

Angular поставляется с модулем макета, который находится в наборе инструментов CDK (Component Dev Kit). Angular CDK содержит хорошо протестированные инструменты, помогающие в разработке компонентов. Одной из частей CDK является модуль макета, который содержит BreakpointObserver. Этот помощник предоставляет доступ к контрольным точкам медиа-запросов, а это означает, что компоненты (и их содержимое) могут адаптироваться к изменениям, когда размер браузера (размер экрана) изменяется интуитивно.

Рекомендуемое чтение: Модуль макета

Теперь, когда мы разобрались с теорией, давайте приступим к делу и создадим приложение, которое будет реализовывать точки останова для адаптивных изображений. В этой первой итерации мы создадим оболочку приложения через Angular CLI: ng new bpo и выберите необходимые опции.

Чтобы использовать BreakpointObserver нам также нужно установить модуль компоновки Angular CDK, что мы можем сделать через npm: npm i @angular/cdk.

После установки мы сможем добавить необходимые операторы импорта в любой компонент, который пожелаем:

// app.component.ts
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

С помощью BreakpointObserver мы можем подписаться на изменения ширины области просмотра, а Angular предоставляет нам удобные средства доступа, что означает, что нам вообще не нужно использовать медиа-запросы! Давайте продолжим и попробуем это:

// app.component.ts
constructor(public breakpointObserver: BreakpointObserver) { }

ngOnInit() {
    this.breakpointObserver.observe([
      Breakpoints.XSmall,
      Breakpoints.Small,
      Breakpoints.Medium,
      Breakpoints.Large,
      Breakpoints.XLarge
    ]).subscribe(result => {
      if (result.breakpoints[Breakpoints.XSmall]) {
       // handle XSmall breakpoint
      }
      if (result.breakpoints[Breakpoints.Small]) {
       // handle Small breakpoint
      }
      if (result.breakpoints[Breakpoints.Medium]) {
      // handle Medium breakpoint
      }
      if (result.breakpoints[Breakpoints.Large]) {
        // handle Large breakpoint
      }
      if (result.breakpoints[Breakpoints.XLarge]) {
        // handle XLarge breakpoint
      }
    });
  }

Как упоминалось ранее, приведенные выше свойства доступа отражают медиа-запросы следующим образом:

  • Breakpoints.XSmall: максимальная ширина = 599,99 пикселей
  • Breakpoints.Small: минимальная ширина = 600 пикселей и максимальная ширина = 959,99 пикселей.
  • Breakpoints.Medium: минимальная ширина = 960 пикселей и максимальная ширина = 1279,99 пикселей.
  • Breakpoints.Large: минимальная ширина = 1280 пикселей и максимальная ширина = 1919,99 пикселей.
  • Breakpoints.XLarge: минимальная ширина = 1920 пикселей

Теперь у нас все готово, а это значит, что мы можем начать генерировать соответствующие изображения.

Отзывчивые точки останова для изображений

У нас есть несколько вариантов создания адаптивных изображений:

  1. Генератор контрольных точек адаптивного изображения
    Используя этот инструмент, мы можем загрузить любое изображение, настроить различные параметры, например, количество изображений, которые мы хотим создать. После запуска инструмента у нас будет визуальное представление о сгенерированных изображениях, и мы сможем загрузить их в виде zip-файла вместе с некоторым сгенерированным кодом, который использует ранее упомянутый <picture> элемент.
  2. Другим решением было бы создать шаг сборки для нашего проекта для создания точек останова с помощью некоторых пакетов, доступных в репозитории NPM, таких как gulp-responsive или grunt-responsive-images. Оба они зависят от дополнительных библиотек, которые нам необходимо установить для нашей операционной системы. (Пожалуйста, проверьте соответствующие репозитории для получения дополнительной информации.)
  3. Еще одним решением может быть использование службы, такой как Cloudinary, для хранения изображений и предоставления их в нужном нам размере и формате, только путем изменения URL-адреса запрошенного ресурса. Это будет наш подход, так как это дает нам наибольшую гибкость.

Рекомендуемое чтение: Автоматизация художественного руководства с помощью генератора контрольных точек адаптивного изображения Эрика Портиса

Я загрузил исходное изображение в свою учетную запись Cloudinary, что означает, что я могу получить доступ к этому изображению по следующему URL-адресу:

https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg

Это полноразмерное, необработанное, исходное и неизменное изображение, с которым мы будем работать.

Мы можем изменить URL-адрес изображения, чтобы создать гораздо меньшую версию. Например, если мы хотим иметь изображение шириной 600 пикселей, мы можем обновить Cloudinary URL* следующим образом:

https://res.cloudinary.com/tamas-demo/image/upload/w_600/breakpoints-article/tuscany.jpg
 

* Обратите внимание w_600 добавлено в URL.

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

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

Обновим наш код:

<!-- app.component.html -->
<div>
  <h1>Current breakpoint: {{ breakpoint }}</h1>
  <img [src]="imagePath">
</div>
// app.component.ts import { Component, OnInit } from '@angular/core';  // ... класс экспорта AppComponent реализует OnInit { imagePath;  конструктор (public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe ([ ...
  }
}

We can pick any number of breakpoints to observe from the list mentioned previously, and since we have an Observer we can subscribe to the changes and act on them:

this.breakpointObserver.observe([
  Breakpoints.XSmall,
  Breakpoints.Small,
  Breakpoints.Medium,
  Breakpoints.Large,
  Breakpoints.XLarge
]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // обрабатываем этот случай } });

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

Добавьте следующее в начало определения компонента:

// app.component.ts
imagePath;
  breakpoint;
  cloudinaryOptions;
  baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

И добавьте следующее к первому if утверждение:

// app.component.ts
let url = this.baseURL.split("https://www.smashingmagazine.com/");
let insertIndex = url.indexOf('upload');
const options="c_thumb,g_auto,f_auto,q_auto,w_400";
url.splice(insertIndex + 1, 0, options);
this.imagePath = url.join("https://www.smashingmagazine.com/");
this.breakpoint = Breakpoints.XSmall;

Результатом будет обновленный Cloudinary URL:

https://res.cloudinary.com/tamas-demo/image/upload/c_thumb,g_auto,f_auto,q_auto,w_400/breakpoints-article/tuscany.jpg

Какие параметры мы устанавливаем здесь?

  • c_thumb (генерирует миниатюру изображения);
  • g_auto (сосредотачивается на самом интересном, на миниатюре мы видим собор);
  • f_auto (обслуживает наиболее подходящий формат для данного браузера, т.е. WebP для Chrome);
  • q_auto (уменьшает качество — и, следовательно, общий размер — изображения, не влияя на визуальные эффекты);
  • w_400 (устанавливает ширину изображения на 400px).

Ради любопытства давайте сравним исходный размер изображения с этим вновь сгенерированным изображением: 2,28 МБ против 29,08 КБ!

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

Вывод

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

Существует множество методов, которые обеспечивают загрузку правильного изображения на нужное устройство (или даже при изменении размера устройства). В этой статье мы рассмотрели подход, использующий встроенную функцию Angular под названием BreakPoint Observer, которая дает нам мощный интерфейс для работы с адаптивными изображениями. Кроме того, мы рассмотрели сервис, который позволяет нам обслуживать, преобразовывать изображения и управлять ими в облаке. Имея в руках такие убедительные инструменты, мы по-прежнему можем создавать иммерсивные визуальные веб-интерфейсы, не теряя посетителей.

Сокрушительная редакция
(дм, ил)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Управление точками останова изображения с помощью Angular

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»