← Images / images / optimization

Добавление наложений и водяных знаков

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

Наложения (overlay) в Worker можно рисовать двумя способами:

cf.image для вложенного запроса fetch, добавьте draw массив к параметрам изображения. Все изображения должны быть доступны по URL. Используйте этот подход при оптимизации изображений через Интерфейс URL.
Привязка Images, объедините в цепочку .draw() вызовы при наложении изображений из любого источника, включая изображения в Images или R2.

Наложение с помощью `cf.image`

Чтобы нарисовать наложения на fetch() подзапрос в Workers можно добавить draw массив в cf.image опции.

Каждый элемент массива задаёт наложение и его параметры, включая параметры оптимизации например width, height, fit, blur, а также rotate. Наложения отрисовываются в том порядке, в котором они указаны: последний элемент оказывается верхним слоем.

export default {
	async fetch(request) {
		const imageURL = "https://example.com/image.png";

		return fetch(imageURL, {
			cf: {
				image: {
					width: 800,
					height: 600,
					draw: [
						{
							url: "https://example.com/branding/logo.png",
							bottom: 5,
							right: 5,
							fit: "contain",
							width: 100,
							height: 50,
							opacity: 0.8,
						},
					],
				},
			},
		});
	},
};

Наложение с помощью привязки Images

Привязка Images использует поддерживающий цепочки вызовов .draw() для наложения одного изображения поверх другого. Можно объединять в цепочку несколько .draw() вызовы для нескольких наложений.

Передайте изображение наложения первым аргументом, а параметры отрисовки вторым. Чтобы применить параметры оптимизации к накладываемому изображению, передайте .input() цепочку с .transform() в качестве первого аргумента.

export default {
	async fetch(request, env) {
		const img = await fetch("https://zzzdna.com/blue.png");
		const watermark = await fetch("https://zzzdna.com/purple.png");

		const response = (
			await env.IMAGES
				.input(img.body)
				.draw(
					env.IMAGES.input(watermark.body).transform({ width: 100 }),
					{ bottom: 10, right: 10, opacity: 0.5 }
				)
				.output({ format: "image/avif" })
		).response();

		return response;
	},
};

Параметры

Размеры выходного изображения всегда определяются базовым изображением. Затем наложение отрисовывается поверх холста базового изображения.

Следующие параметры, относящиеся к draw, можно использовать для позиционирования и смешивания.

`url`

Абсолютный URL оверлейного изображения при отрисовке с помощью cf.image. Поддерживает любой поддерживаемый формат изображения. Для водяных знаков или наложений неправильной формы используйте изображения PNG или WebP.

При наложении изображений с помощью привязки Images оверлей передаётся в виде байтов изображения или .input() цепочку вместо URL. См. Наложение с помощью привязки Images.

`width` и `height`

Задаёт максимальные размеры накладываемого изображения при отрисовке с cf.image. Принимает целое число (в пикселях) или десятичное значение от 0 и 1 представляющее собой долю размера базового изображения. Например, height:0.25 задаёт высоту накладываемого изображения равной 25% высоты базового изображения.

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

При наложении изображений с помощью привязки Images размеры оверлея можно задать с помощью .transform() метод.

`repeat`

Определяет, нужно ли размещать наложение мозаикой по всему изображению.

Принимает следующие значения:

true, размещает наложение плиткой по всей области. Это полезно для водяных знаков.
x, размещает наложение плиткой только по горизонтали.
y, размещает наложение плиткой только по вертикали.

`top`, `left`, `bottom`, `right`

Задаёт положение накладываемого изображения как смещение в пикселях от указанного края. 0 выравнивает наложение вплотную к краю. Если позиция не указана, наложение центрируется.

Например, { bottom: 0, right: 10 } размещает наложение в нижнем правом углу, отступив 10 пикселей от правого края.

При одновременном указании left и right, или оба варианта top и bottom возвращает ошибку.

`opacity`

Задаёт прозрачность накладываемого изображения. Принимает десятичное значение в диапазоне 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Например, opacity: 0.5 делает наложение полупрозрачным.

`composite`

Определяет, как наложение сочетается с базовым изображением, с помощью Операции композитинга Porter-Duff ↗. Значение по умолчанию: over.

Режим композиции влияет только на область в пределах ограничивающей рамки наложения. За пределами этой области базовое изображение всегда остаётся неизменным.

Принимает следующие значения:

`over`

Накладывает изображение поверх базового. Это стандартное composite поведение.

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

`in`

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

`atop`

Накладывает изображение поверх базового, но только там, где базовое изображение непрозрачно. Из-за этого наложение обрезается по форме базового изображения.

Если у накладываемого изображения есть прозрачные пиксели, перекрывающие базовое изображение, базовое изображение остаётся видимым (в отличие от in).

`out`

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

`xor`

Показывает области каждого изображения, где другое изображение прозрачно. Перекрывающиеся непрозрачные области становятся прозрачными. Это можно использовать для создания скруглённые углы или собственные фигуры.

`lighter`

Складывает значения цвета обоих изображений, из-за чего области наложения становятся светлее.

Примеры

Водяной знак

Разместите полупрозрачный водяной знак плиткой по всему изображению с помощью cf.image.

fetch(imageURL, {
	cf: {
		image: {
			draw: [
				{
					url: "https://example.com/watermark.png",
					repeat: true,
					opacity: 0.2,
				},
			],
		},
	},
});

Логотип в углу

Разместите логотип в правом нижнем углу с помощью cf.image.

fetch(imageURL, {
	cf: {
		image: {
			draw: [
				{
					url: "https://example.com/logo.png",
					bottom: 5,
					right: 5,
				},
			],
		},
	},
});

Несколько наложений

Объедините несколько наложений в одном запросе с помощью cf.image. Они отрисовываются по порядку: последний элемент становится верхним слоем.

fetch(imageURL, {
	cf: {
		image: {
			draw: [
				{ url: "https://example.com/watermark.png", repeat: true, opacity: 0.2 },
				{ url: "https://example.com/play-button.png" },
				{ url: "https://example.com/logo.png", bottom: 5, right: 5 },
			],
		},
	},
});

Скруглённые углы

Вырезает скруглённые углы у изображения. В каждом углу отрисовывается маска, повёрнутая в соответствии с положением угла. xor удаляет перекрывающиеся пиксели.

В примере ниже показано, как это можно сделать с помощью Привязка Images.

const image = await fetch("https://example.com/photo.png");
const mask = await fetch("https://example.com/corner-mask.png");

let [topLeft, topRight] = mask.body.tee();
let bottomLeft, bottomRight;
[topLeft, bottomLeft] = topLeft.tee();
[topLeft, bottomRight] = topLeft.tee();

const output = await env.IMAGES
	.input(image.body)
	.draw(env.IMAGES.input(topLeft).transform({ rotate: 0 }), {
		left: 0,
		top: 0,
		composite: "xor",
	})
	.draw(env.IMAGES.input(topRight).transform({ rotate: 90 }), {
		right: 0,
		top: 0,
		composite: "xor",
	})
	.draw(env.IMAGES.input(bottomRight).transform({ rotate: 180 }), {
		bottom: 0,
		right: 0,
		composite: "xor",
	})
	.draw(env.IMAGES.input(bottomLeft).transform({ rotate: 270 }), {
		bottom: 0,
		left: 0,
		composite: "xor",
	})
	.output({ format: "image/png" });

return output.response();