MaxRokatansky 9 мар 2021 в 16:33

Программная генерация изображений с помощью API CSS Painting

5 мин

8.9K

Блог компании OTUSCSS*JavaScript*Программирование*

Перевод

JavaScript API для динамического создания изображений в сочетании с CSS

Для будущих студентов курса "JavaScript Developer. Professional" подготовили перевод материала.

Также приглашаем посетить открытый вебинар на тему «Vue 3 — возможности новой версии одного из самых популярных фронтенд фреймворков». На занятии участники вместе с экспертом:

— рассмотрят ключевые отличия в синтаксисе vue2 от vue3;
— разберут, как работать с vue-router и VueX в новой версии фреймворка;
— попробуют создать проект на Vue 3 с нуля с помощью Vue-cli.

Присоединяйтесь!

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

Вы можете программно генерировать геометрические изображения «на лету», используя API CSS Painting.

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

Введение в API CSS Painting

CSS Painting API позволяет разработчикам писать JavaScript-функции для отрисовки изображений в свойствах CSS, таких как background-image и border-image. Он предоставляет набор API, который дает разработчикам доступ к CSSOM. Это часть CSS Houdini (Houdini — коллекция новых API браузера, предоставляющая разработчикам доступ к самому CSS на более низком уровне).

Традиционный подход к добавлению изображения следующий:

div {
  background-image: url('assets/background.jpg);
}

С помощью CSS Painting API можно вызвать функцию paint() и передать ей ворклет (worklet), который написан с помощью JS, вместо вышеуказанного способа.

div {
  background-image: paint(background);
}

В этом случае рабочий процесс будет выглядеть следующим образом.

Возможно, вы столкнулись с неизвестными терминами в вышеуказанном разделе. Например, что это за worklets, о которых мы продолжаем говорить?

Вкратце, JavaScript-код, написанный для программной генерации изображения, называется Paint Worklet (Рабочий пакет для рисования). Worklet — это точка расширения в канале рендеринга браузера. Есть и другие типы ворклетов (worklets), помимо worklets для рисования, например, worklets анимации, макетирования и т.д.

Теперь давайте рассмотрим пошаговый подход к программной генерации изображения.

Использование API CSS Painting на практике

В этой статье мы рассмотрим, как создать пузырьковый фон.

Шаг 1: Добавить функцию paint() в CSS

Прежде всего, вам нужно добавить функцию paint() в свойство CSS, на котором должно быть изображение.

.bubble-background {
  width: 400px;
  height: 400px;
  background-image: paint(bubble);
}

bubble будет worklet, который мы создадим для генерации изображений. Это будет сделано в следующих нескольких шагах.

Совет: поделитесь своими многократно используемыми компонентами между проектами, используя Bit (Github).

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

Bit поддерживает Node, TypeScript, React, Vue, Angular и многое другое.

Анимация. Пример: исследование компонентов React многоразового использования, совместно используемых на Bit.dev.

Шаг 2: Создание ворклета (worklet)

Ворклеты (worklets) должны храниться во внешнем JS-файле. Ворклет для рисования (paint worklet) будет class. Например: - class Bubble { …. } . Этот ворклет (worklet) необходимо зарегистрировать с помощью метода registerPaint().

class Bubble {
    paint(context, canvas, properties) {
        ........
    }
}
registerPaint('bubble', Bubble);

Первым параметром метода registerPaint() должна быть ссылка, которую вы включили в CSS.

Теперь нарисуем фон.

class Bubble {
    paint(context, canvas, properties) {
        const circleSize = 10; 
        const bodyWidth = canvas.width;
        const bodyHeight = canvas.height;

        const maxX = Math.floor(bodyWidth / circleSize);
        const maxY = Math.floor(bodyHeight / circleSize); 

        for (let y = 0; y < maxY; y++) {
          for (let x = 0; x < maxX; x++) {
            context.fillStyle = '#eee';
            context.beginPath();
            context.arc(x * circleSize * 2 + circleSize, y * circleSize * 2 + circleSize, circleSize, 0, 2 * Math.PI, true);
            context.closePath();
            context.fill();
          }
       }
    }
}
registerPaint('bubble', Bubble);

Логика создания изображения находится внутри метода paint(). Вам понадобится немного знаний о создании холста, чтобы рисовать изображения, как описано выше. Обратитесь к документации по Canvas API, если вы не знакомы с ним.

Шаг 3: Запустите ворклет (worklet)

Последним шагом будет запуск ворклета (worklet) в HTML-файле.

<div class="bubble-background"></div>
<script>
 CSS.paintWorklet.addModule('https://codepen.io/viduni94/pen/ZEpgMja.js');
</script>

Готово!

Вы программно сгенерировали изображение всего за 3 шага.

Сгенерированное изображение

Результат того, что мы создали, будет выглядеть следующим образом.

View in Editor (просмотр в редакторе)

Что еще мы можем сделать с помощью этого API CSS Painting?

Возможности CSS Painting API еще не исчерпаны. Есть другие вещи, которые вы можете с ним сделать.

1. Вы можете создавать динамические изображения

Например, можно динамически изменять цвет пузырьков. Для этого применяются переменные CSS. Чтобы применить CSS-переменные, браузер должен заранее знать, что мы их используем. Для этого мы можем задействовать метод inputProperties().

registerPaint('bubble', class {
  static get inputProperties() {
   return ['--bubble-size', '--bubble-color'];
  }

  paint() {
    /* ... */
  }
});

Переменные могут быть назначены с помощью третьего параметра, переданного в метод paint().

paint(context, canvas, properties) {
   const circleSize = parseInt(properties.get('--bubble-size').toString());
   const circleColor = properties.get('--bubble-color').toString();
   const bodyWidth = canvas.width;
   const bodyHeight = canvas.height;

   const maxX = Math.floor(bodyWidth / circleSize);
   const maxY = Math.floor(bodyHeight / circleSize); 

   for (let y = 0; y < maxY; y++) {
     for (let x = 0; x < maxX; x++) {
       context.fillStyle = circleColor;
       context.beginPath();
       context.arc(x * circleSize * 2 + circleSize, y * circleSize * 2 + circleSize, circleSize, 0, 2 * Math.PI, true);
       context.closePath();
       context.fill();
     }
   }
}

2. Вы можете генерировать случайные изображения с помощью Math.random() в методе paint().

// CSS
body {
  width: 200px;
  height: 200px;
  background-image: paint(random);
}
// JS
function getRandomHexColor() {
  return '#'+ Math.floor(Math.random() * 16777215).toString(16)
}
class Random {
  paint(context, canvas) {
    const color1 = getRandomHexColor();
    const color2 = getRandomHexColor();

    const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop(0, color1);
    gradient.addColorStop(1, color2);

    context.fillStyle = gradient;
    context.fillRect(0, 0, canvas.width, canvas.height);
  }
}
registerPaint('random', Random);

Если вы хотите узнать больше о том, как это реализовать, дайте мне знать в разделе комментариев ниже.

Это потрясающе, не так ли?

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

Поддержка браузеров

Большинство браузеров, включая Firefox, не поддерживают CSS Paint API. Только браузеры на основе Chrome и Chromium пока что имеют полную поддержку. Будем надеяться, что поддержка браузеров улучшится в ближайшем будущем.

Резюме

CSS Paint API чрезвычайно полезен для сокращения времени отклика сетевых запросов. Это достигается путем генерации некоторых изображений программно, а не путем их получения через сетевые запросы.

Кроме того, основные преимущества, на мой взгляд, следующие.

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

Создание изображений, не зависящих от разрешения (больше никаких изображений плохого качества на вашем сайте).

Важным моментом является то, что вы можете использовать полифил (polyfill) в качестве обходного пути для поддержки таких браузеров, как Firefox, которые еще не реализовали CSS Painting API.

Сообщите ваши мысли по этому поводу тоже. Спасибо за чтение!

Узнать подробнее о курсе "JavaScript Developer. Professional".
Смотреть открытый вебинар на тему «Vue 3 — возможности новой версии одного из самых популярных фронтенд фреймворков».

Теги:

Хабы: