Самый беспроблемный способ реализации графического фона состоит в использовании повторяющейся текстуры («мозаики»), которая автоматически заполнит окно любого размера. Другой несложный вариант — привязка графики к границе окна браузера (так, например, обычно делают модный фоновый градиент) или к одному из ее углов (часто используется для позиционирования больших визуальных элементов). Такие текстуры так же не «сломаются» при изменении масштаба.

Описанные методы подходят в тех случаях, когда само фоновое изображение не содержит в себе сложных деталей и «границ кадра», обрезающих объекты на картинке. Существует способ сделать «бесконечный» фон на основе фотографии, описание которого я нашел на сайте 24ways.org, и привожу здесь перевод со своими комментариями.

Автор: Эллиот Джей Стокс, elliotjaystocks.com
Оригинал: http://24ways.org/2007/the-neverending-background-image-story
Перевод: Александр Мусаев, paradigm.ru

В статье рассмотрен метод превращения фотографии в фон для веб-страницы, который сможет заполнить окно браузера любой ширины. Мы не будем останавливаться на деталях обработки конкретной фотографии, а дадим описание обобщенной последовательности шагов. Для иллюстрации используется фотографии пляжа Майами-Бич, подготовленная для сайта futureofwebapps.com.

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

1. Выбор исходного изображения

Можно выделить три критерия оценки пригодности фотографии для создания бесконечного фона:

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

Ниже — исходная версия фотографии, приобретенной на iStockPhoto, а здесь — ее увеличенная копия с комментарии отдельных деталей, объясняющих сделанный выбор.

Та же фотография со «сглаженными», в ходе предварительной обработки Фотошопом, углами.

2. Горизонтальные линии

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

В Фотошопе есть очень удобный для этой цели инструмент — Single column marquee tool. Выделяем им «пограничные» пиксели (в нашем примере — с правой стороны фотографии), затем копируем их в новый слой и, с помощью инструмента Free transform (Ctrl-T/Cmd-T), растягиваем полученный фрагмент в ширину, заполняя им всю рабочую область.

3. Клонирование

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

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

Основная часть тени осталась «натуральной», а клонированный фрагмент был дополнительно трансформирован и размыт градиентом, благодаря чему в глаза не бросается то, что это копия.

4. Сглаживание границ

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

На следующей иллюстрации показаны два слоя: самый «нижний» слой, который был сделан на первом шаге, и фронтальный, расположенный в правой части изображения. Основной слой с фотографией будет находиться между ними (в данном случае он скрыт).

Периферийный слой плавно сливается с основным изображением и скрывает нежелательные тени на песке.

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

5. Сшивание текстуры

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

В нашем примере это могут быть облака.

Используем мягкие кисти и отдельный слой для рисования.

Снижаем прозрачность «облака» до 20%, после чего, с помощью Free transform tool, отодвигаем его за правую границу кадра так, чтобы центр слоя совпал с ней.

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

Прим. переводчика: в приведенном примере можно было бы вообще обойтись без «размножения» пальм, ограничившись уходящей за границы окна линией побережья. В противном случае, на больших мониторах остается заметно, что детали изображения на переднем плане клонированы (см. тень от крайней левой пальмы).

Программный интерфейс у сервиса достаточно прост: все параметры отрисовки диаграммы и данные для визуализации передаются на сервер Google в виде GET запроса (проще говоря, специального URL), а сервер в ответ отдает PNG с нарисованным графиком. По скорости процесс сравним с загрузкой статических файлов, кроме того правила его использования не накладывают никаких жестких ограничений на количество обращений с одного хоста. Все это позволяет очень легко интегрировать Chart в свои системы, да еще и бесплатно снять с собственного сервера дополнительную нагрузку по генерации графики.

Гибкость возможностей Chart API послужила причиной разростания количества параметров URL. Ниже будут приведены несколько примеров того, как с помощью серверных скриптов облегчить задачу по формированию запросов к сервису.

Упаковка данных

В Chart API предлагается три варианта представления данных, на основе которых будут строиться диаграммы. Самый простой из них — перечисление значений через запятую. Но для большей компактности URL, так же можно кодировать числа одним из двух способов, в результате чего объем передаваемых данных сократится.

Самым эффективным способом кодирования, который мы и будем использовать, является т.н. «extended encoding». Метод сводится к последовательной записи двузначных чисел в шестидесятичетырехразрядной (прости меня, русский язык) системе счисления. Динамический диапазон таких значений находится в интервале от 0 до 4095 (64² — 1). Для их представления в кодированном виде, согласно предписанию документации, необходимо использовать строчные и прописные английские буквы, цифровые символы, а так же тире и точку (всего набирается как раз 64 символа). В том случае, если значение не задано, оно будет обозначаться последовательностью из двух «_».

Следующая функция, написанная на PHP, выполняет преобразование десятичных чисел в extended encoding для Google Chart:

function google_ext_encode($dec) {
	if($dec === false) return '__';

	$e = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.
		'abcdefghijklmnopqrstuvwxyz0123456789-.';
	$m = strlen($e); // == 63
	$res = '';

	do {
		$r = $dec % $m;
		$dec = (int)($dec / $m);
		$res = $e[$r].$res;
	} while($dec > 0);

	$res = sprintf("%'A2s", $res);
	return $res;
}

Тест:

$test = array(0, 25, 26, 51, 4093, 4094, 4095);
echo '<pre>';
printr_r(array_map("google_ext_encode", $test));
echo '</pre>';

Программа выдаст несколько закодированных чисел, с аналогичными приведенным в документации значениями: AA, AZ, Aa, Az, .9, .-, ...

Поддержка русского языка

Еще до начала первых экспериментов с Google Chart, у меня было подозрение на тему того, что в нем может не оказаться поддержки русского алфавита (и вообще любых языков кроме английского). Как выяснилось, подозрения были напрасны: API прекрасно поддерживает UTF-8.

HTML код для вставки графика в веб страницу удобно генерировать с помощью специальной функции, пример реализации которой приведен далее. Внутри нее выполняется корректное преобразование текста для надписей:

function chart_html($type, $width,
	$height, $data, $labels = false, $colors = false, $alt = '') {

	$edata = implode('', (array_map("google_ext_encode", $data)));
	$url = 'http://chart.apis.google.com/chart?cht='.$type.
		'&chd=e:'.$edata.'&chs='.$width.'x'.$height;

	if(is_array($colors) && count($colors))
		$url .= '&chco='.implode(',', $colors);

	if(is_array($labels) && count($labels))
		$url .= '&chl='.implode('|', (array_map("urlencode", $labels)));

	return '<img src="'.$url.'" width="'.$width.'" height="'.$height.
		'" alt="'.$alt.'" />';
}

Стоит обратить внимание на две детали:

1. Функция не задействует все параметры, доступные в Charts API, а работает только с наиболее актуальными. Она была написана для генерации круговых диаграмм под конкретную задачу. Для иных типов графиков логичным шагом будет корректировка набора аргументов.
2. Файл с кодом сохранен в кодировке UTF-8. При хранении исходников и данных в 8-битной кодировке, понадобится дополнительное преобразование текста в UTF, чтобы не-английские буквы не отображались на диаграммах как вопросительные знаки.

Функция chart_html() будет выдавать XHTML теги img, в соответствии с заданными параметрами:

• $type — условное обозначение типа диаграммы. Используемое в тестах значение p3, например, соответствует трехмерной круговой диаграмме. Описание других вариантов можно найти в официальной документации API.
• $width, $height — соответственно, ширина и высота генерируемого графического изображения в пикселях. Максимальное значение для каждой величины — 1000. При выборе размера, следует помнить о необходимости свободного пространства вокруг графика, т.к. при его недостатке надписи могут быть обрезаны границей картинки. Оптимальную величину для выбранного сочетания размера и типа диаграммы, проще всего подбирать методом «научного тыка».
• $data — массив с данными для визуализации на диаграмме.
• $labels — (необязательный параметр) массив с надписями для отображения на графике.
• $colors — (необязательный параметр) массив со значениями цветов, которые будут использованы для отрисовки элементов изображения (например, секторов круговой диаграммы). Если количество цветов в массиве будет меньше количества элементов, дополнительные, схожие по тональности цвета будут добавлены автоматически.
• $alt — (необязательный параметр) значение атрибута alt тега img. Если этот аргумент не задать, атрибуту alt будет задано пустое значение.

Тест:

$width = 300;
$height = 100;
$data = array(100, 128, 200, 38);
$labels = array('Одно', 'Другое', 'Третье', 'Четвертое');

echo chart_html('p3', 500, 150, $data, $labels, false,
	'Google Chart Test').'<br />';

shuffle($data);

// задано значение альфа-канала
$colors = array('33dd66cc');
echo chart_html('p3', 500, 150, $data, $labels, $colors,
	'Демография Хабрахабра').'<br />';

Функция chart_html() будет генерировать ссылки примерно такого вида:

http://chart.apis.google.com/chart? cht=p3 &chd=e:BkCADIAm &chs=500x150 &chl=%D0%9E%D0%B4%D0%BD%D0%BE |%D0%94%D1%80%D1%83%D0%B3%D0%BE%D0%B5 |%D0%A2%D1%80%D0%B5%D1%82%D1%8C%D0%B5 |%D0%A7%D0%B5%D1%82%D0%B2%D0
%B5%D1%80%D1%82%D0%BE%D0%B5

В результате получаем две диаграммы:

Демография Хабрахабра:

(благодаря заданному значению альфа-канала, диаграмма получилась полупрозрачной)