Самый бюджетный вариант коллажа с использованием браузера.
1. Копируете этот код и сохраняете в файле index.html;
2. Создаете каталог photo рядом с файлом index.html и закидываете туда уже пронумерованные по порядку фото.
3. Поправляете параметры:
а) В селекторе "table tr td img" задаете width и height - размер одной миниатюры в коллаже.
б) Указываете photo_count - кол-во фоток в каталоге photo.
в) Указываете col_count - кол-во фоток в одном ряду коллажа.
г) Указываете start_pic_number - с какого номера начинается нумерация фоток.
д) Указываете filename_counter_size - размерность нумерации фоток, если идет 01, 02, 03 - то размерность 2,
если, например 00001, 00002, 00003, то размерность 5.
е) Задаете принцип формирования имени файла в filename.
Если расширение у вас не jpg, а например png, то строка будет выглядеть так:
var filename = filename_counter + '.png';
Если в имени файла есть какие-то постоянные символы, кроме счетчика, например они именуются DSC_0001.JPG, то имя файла будет формироваться так:
var filename = 'DSC_' + filename_counter + '.JPG';
Имя файла чувствительно к регистру символов!
ж) Корректируюете путь к файлу относительно страницы index.html, если требуется.
var filepath = 'photo/' + filename;
Фрагмент 'photo/' задает каталог с фотками.
Следует избегать именования каталога и фоток кириллицей.
4. Открываете index.html в браузере.
5. Если файлов много, то ждете окончания открытия страницы. Зависит от производительности компа, свободной оперативной памяти.
6. Если все в порядке, то миниатюры отобразятся. Это значит, что путь задан верно для фоток и фотки пронумерованы правильно и компу хватило ресурсов отобразить коллаж.
7. Делаем скриншот всей страницы:
Инструкция для браузера Google Chrome.
Ctrl+Shift+I — войти в режим разработчика.
Ctrl+Shift+M — нажать в нем на кнопку эмуляции просмотра в мобильных устройствах.
Нажать на кнопку меню в окне эмулации (см. в правый верхний угол страницы) и выбрать пункт «Capture full size screenshot».
После некоторого времени браузер "закачает" некий файл изображения.
Это и будет конечный результат - коллаж.
<html>
<head>
<style>
html, body
{
margin: 0;
padding: 0;
}
table
{
border: none;
}
table tr td img
{
width: 400px;
height: 300px;
}
table tr td p
{
font-size: 10pt;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<table id="container">
</table>
<script>
function gen_collage()
{
var photo_count = 10; // кол-во фото в каталоге (нужно задать)
var col_count = 5; // кол-во фото в одной строке коллажа (нужно задать)
var row_count = photo_count / col_count + (photo_count % col_count > 0 ? 1 : 0); // вычисляем, сколько строк для генерации коллажа потребуется
var start_pic_number = 1; // индекс первой фотки коллажа (если файлы начинаются, например, с 01.jpg, то нужно поставить 1)
var filename_counter_size = 2; // размер счетчика с ведущими нулями, если поставить 2, то будет генерировать 01, 02, 03 и тд.
var cur_pic_number = start_pic_number; // номер текущей фотки
var table_inner = ''; // содержимое таблицы коллажа
for(var i = 0; i < row_count; i++)
{
var row_pictures_inner = '<tr>'; // строка коллажа
for(var j = 0; j < col_count; j++)
{
row_pictures_inner += '<td>'; // ячейка коллажа
if(cur_pic_number - start_pic_number < photo_count)
{
var filename_counter = ('000000000' + cur_pic_number).substr(-filename_counter_size); // счетчик с ведущими нулями
var filename = filename_counter + '.jpg'; // имя файла на основе счетчика (сейчас генерирует 01.jpg, 02.jpg и тд.)
var filepath = 'photo/' + filename; // путь к файлу (сейчас задан относительный путь, файлы нужно поместить в каталог photo, index.html должен лежать рядом с каталогом photo)
row_pictures_inner += '<div><img src="' + filepath + '"/><p>' + filename + '</p></div>'; // содержимое ячейки коллажа
}
row_pictures_inner += '</td>';
cur_pic_number++;
}
row_pictures_inner += '</tr>';
table_inner += row_pictures_inner;
}
document.getElementById('container').innerHTML = table_inner;
}
gen_collage();
</script>
</body>
</html>
