API JavaScript для создания динамических изображений в сочетании с CSS
Изображения добавляют цвет приложению. Однако, как мы все знаем, наличие большого количества изображений с высоким разрешением влияет на время загрузки страницы. Для изображений продуктов, сценариев и т. Д. У нас нет другого выбора, кроме как включить эти изображения и оптимизировать приложение путем их кеширования. Но если вам нужно геометрическое изображение в приложении, вам больше не нужно включать его в качестве ресурса.
Вы можете программно генерировать геометрические изображения на лету с помощью CSS Painting API.
Давайте узнаем, что это за API и как с его помощью сгенерировать изображение.
Введение в API рисования CSS
CSS Painting API позволяет разработчикам писать функции JavaScript для рисования изображений в свойствах CSS, таких как background-image и border-image. Он предоставляет набор API-интерфейсов, которые предоставляют разработчикам доступ к CSSOM. Это часть CSS Houdini (Houdini - набор новых API-интерфейсов браузера, предоставляющий разработчикам низкоуровневый доступ к самому CSS).
Традиционный подход к включению изображения заключается в следующем.
div {
background-image: url('assets/background.jpg);
}
С помощью API рисования CSS вы можете вызвать функцию paint() и передать рабочийлет, написанный на JS вместо указанного выше.
div {
background-image: paint(background);
}
Рабочий процесс этого будет следующим.
Возможно, вы встретили неизвестные термины в приведенном выше разделе. Например, о чем мы все время говорим?
Вкратце, код JavaScript, написанный для программного создания изображения, называется Paint Worklet. Рабочий лист - это точка расширения конвейера рендеринга браузера. Помимо рисования, существуют и другие типы рабочихлетов, такие как анимационные рабочиелеты, макеты и т. Д.
Теперь давайте рассмотрим пошаговый подход к программному созданию изображения.
Использование API рисования CSS на практике
В этой статье мы рассмотрим, как создать фон пузыря.
Шаг 1. Добавьте функцию CSS paint()
Прежде всего, вам нужно добавить функцию paint() в свойство CSS, в котором вам нужно разместить изображение.
.bubble-background {
width: 400px;
height: 400px;
background-image: paint(bubble);
}
bubble будет рабочим столом, который мы создадим для создания изображений. Это будет сделано на следующих нескольких шагах.
Создавайте лучшие библиотеки компонентов и системы проектирования
Делитесь компонентами между командами и проектами, чтобы ускорить разработку и убедиться, что ваши пользователи видят единообразный дизайн в каждой точке взаимодействия.
Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания, совместного использования и внедрения компонентов в разных командах и приложениях. Создайте центр компонентов бесплатно попробуйте →
Шаг 2: определение рабочего листа
Рабочие листы необходимо хранить во внешнем файле JS. Краска будет class. Например :- class Bubble { .... }. Этот рабочийлет необходимо зарегистрировать с помощью метода 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: вызовите рабочийлет
Последним шагом будет вызов рабочеголета в HTML-файле.
<div class="bubble-background"></div>
<script>
CSS.paintWorklet.addModule('https://codepen.io/viduni94/pen/ZEpgMja.js');
</script>
Это сделано!
Вы программно сгенерировали изображение всего за 3 шага.
Созданное изображение
Результат того, что мы создали, будет выглядеть следующим образом.
Что еще мы можем делать с этим API рисования CSS?
Возможности API рисования CSS еще не исчерпаны. Вы можете сделать с ним еще много чего.
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 чрезвычайно полезен для сокращения времени ответа на сетевые запросы. Это достигается за счет программного создания некоторых изображений, а не их извлечения через сетевые запросы.
Помимо этого, на мой взгляд, основные преимущества заключаются в следующем.
- Возможность создавать полностью настраиваемые изображения в отличие от статических изображений.
- Он создает изображения, не зависящие от разрешения (на вашем сайте больше не будет изображений плохого качества).
Важно отметить, что вы можете использовать полифил в качестве обходного пути для поддержки браузеров, таких как Firefox, которые еще не реализовали API рисования CSS.
Сообщите нам и свои мысли по этому поводу. Спасибо за прочтение!
