Здравствуйте. Как с помощью PHP или JS красиво укладывать разноразмерные изображения в единую мозаику (как во «ВКонтакте» на стенах)? В последнем, как я понял, на стороне клиента за это отвечает файл http://st3.vk.me/js/al/thumbs_edit.js?17 , но я так и не смог его разобрать. jQuery Masonry не предлагать. Вообще, предпочтительнее решение на PHP. Заранее благодарен.
Отслеживать
Pferdeficker
задан 3 июн 2013 в 11:51
Pferdeficker Pferdeficker
31 1 1 золотой знак 1 1 серебряный знак 8 8 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
На javascript, на PHP (правда ссылки на исходники уже не рабочие).
Отслеживать
141 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков
ответ дан 3 июн 2013 в 12:22
Гена Царинный Гена Царинный
4,677 1 1 золотой знак 15 15 серебряных знаков 24 24 бронзовых знака
JS нежелателен, а по PHP-варианту — там как-то много комментариев про тормознутость кода, дескать, ожидание длится минутами.
3 июн 2013 в 12:30
Как из фотографии сделать мозаику для вконтакте.
вы когда-то слышали про кэширование миниатюр? Вот если у вас есть 100 картинок, сколько раз вы должны просчитать им ширину и высоту и согранить миниатюры чтобы выложить мозаикой? Не уж то каждый раз будете пересчитывать? Или сделаете один раз, а потом выведете все это сколько угодно раз когда попросят?
3 июн 2013 в 12:40
У меня ширина и высота изображения хранится в базе данных. Или я что-то не так понял?
3 июн 2013 в 12:51
Я говорю про тормознутость кода о том, что просчет мозаики можно свести к одному разу и скорость выдачи такой мозаики будет очень быстрой. И все те кто говорит, что это медленно работает просто забывают о важных вещах — таких как кэширование.
3 июн 2013 в 12:54
То есть, можно хранить результаты вычислений в БД в JSON`e, и потом на его основе выводить HTML, так?
Источник: ru.stackoverflow.com
Что за алгоритм разбивает фоточки в ВК в мозаику?
Речь идет о таком отображении:
Возможно, для вывода изображения используется алгоритм TreeMap. Но не ясно, как построить «дерево» из изображений.
#1
17:27, 22 авг 2016
Bizunow
Вопрос-то в чем? По картинке ни хрена не понятно.
#2
18:14, 22 авг 2016
beejah
> Вопрос-то в чем? По картинке ни хрена не понятно.
как оптимально забить фиксированный квадрат изображениями с разным форматом. Сделав вид что нигде ничего не обрезал, а только масштабировал.
КАК СДЕЛАТЬ МОЗАИКУ ИЗ КАРТИНКИ ВО ВКОНТАКТЕ
#3
18:14, 22 авг 2016
Bizunow
делишь по высоте на N, потом каждую получившуюся делишь на рандом
че сложного то
ну немного нужно с размерами поковыряться, с соотношением сторон, так что не совсем рандом получается
SuperInoy
> Сделав вид что нигде ничего не обрезал
там обрезается вроде
#4
18:20, 22 авг 2016
mitroxa
> там обрезается вроде
Да, я знаю. Сказал же — сделав вид, т.е. оптимально распределить, так чтобы обрезалось минимум.
#5
18:27, 22 авг 2016
mitroxa
> ну немного нужно с размерами поковыряться, с соотношением сторон, так что не
> совсем рандом получается
Ахах, это самый дельный совет из всех, что мне давали.
Я думал решить задачу можно использовав TreeMap. Но вся проблема в том, что не понятно как нужно изменить размеры изображений, как построить дерево для дальнейшего отображения с помощью TreeMap.
#6
18:47, 22 авг 2016
Bizunow
входной массив изображений разбить на группы по примерно одинаковому соотношению сторон
высчитать для каждой группы среднее соотношение сторон
делаешь первую строку, рандомом определяешь сколько хочешь плиток
допустим две, берешь из какой либо группы 2 изображения, помечаешь что они уже использовались
на основании соотношения группы и ширины канваса высчитываешь высоту строки
вопрос в том должны ли изображения идти в том же порядке что и в альбоме
если нет то это легко реализуется
если да, то получится такая же хрень как на ОП пике, когда кто-то «типа» фоткал кусок крыши и небо
правка, плитки одинаковые по ширине будут в пределах строки из минусов этого подхода еще
еще можно строки заполнять поиском самого подходящего варианта во входном массиве, но это опять не попорядку всё будет
вообще не получается сделать так чтобы и изображения были по порядку и пропорции соответствовали без обрезки
пс. паттерны зло =)
#7
19:55, 22 авг 2016
mitroxa
Спасибо, сейчас буду пробовать. На очередность я думаю, забью. Не стоит задача воспроизвести 1 в 1.
#8
20:02, 22 авг 2016
На картинке даже не квадрат, это раз. Высота полос не одинакова, это два. Имея это в виду можно построить такую же шнягу практически с любым набором изображений, беря их тупо по очереди.
— соединяем изображения в вертикальную полоску, масштабируя их до одинаковой высоты, пока пропорции полосы не начнут попадать в определённый промежуток (для картинки из примера это где-то от 1:3 до 1:6). Конкретные пропорции зависят от количества изображений и примерно пропорциональны квадратному корню из этого числа.
— соединяем полосы сверху вниз, масштабируя их так, чтобы получалась одинаковая ширина.
— если какое-то изображение имеет нестандартные размеры (слишком длинное/высокое), то обрезаем.
Так в чём проблема то?
#9
21:19, 22 авг 2016
mitroxa
Что-то у меня ни хрена не получается.
mitroxa
> входной массив изображений разбить на группы по примерно одинаковому
> соотношению сторон
Разбил, до этого я додумался.
mitroxa
> высчитать для каждой группы среднее соотношение сторон
Зачем? Я не понял.
mitroxa
> делаешь первую строку, рандомом определяешь сколько хочешь плиток
> допустим две, берешь из какой либо группы 2 изображения, помечаешь что они уже
> использовались
> на основании соотношения группы и ширины канваса высчитываешь высоту строки
А если я возьму «не правильное» кол-во изображений для помещения в линию, то у меня не получится вместить все изображения в 350 пикселей.
Плюс, есть еще и вертикальные линии, как с ними быть?
Zefick
>На картинке даже не квадрат, это раз. Высота полос не одинакова, это два.
А разве это не усложняет задачу?
Zefick
> соединяем изображения в вертикальную полоску, масштабируя их до одинаковой
> высоты, пока пропорции полосы не начнут попадать в определённый промежуток (для
> картинки из примера это где-то от 1:3 до 1:6). Конкретные пропорции зависят от
> количества изображений и примерно пропорциональны квадратному корню из этого
> числа.
Т.е. на этом этапе мы имеем эдакую длинную полоску, склеенную из всех изображений. Они (каждое) масштабированы до таких размеров, чтобы занимать от 30% до 60% высоты моего блока, в котором я буду рисовать. Так?
И определить, сколбко именно процентов должны занимать изображения мне поможет корень из их числа, так?
Zefick
> — соединяем полосы сверху вниз, масштабируя их так, чтобы получалась одинаковая
> ширина.
откуда взялись «полосы»? Ведь у нас одна полоска.
Zefick
> — если какое-то изображение имеет нестандартные размеры (слишком
> длинное/высокое), то обрезаем.
Мне кажется, это придется делать во втором пункте, если я догадываюсь о том, что там будет происходить.
#10
6:23, 23 авг 2016
Bizunow
> А разве это не усложняет задачу?
Это облегчает её в 100500 раз и делает тривиальной.
> Ведь у нас одна полоска.
На рисунке их три. Что всё нужно соединять в одну я не писал. Нужно соединять до тех пор, пока не хватит ширины и начинать следующую.
#11
12:54, 23 авг 2016
Пока как-то так:
Подсмотрел алгоритм linear partition в википедии.
‘use strict’; angular. module(‘imageGrid’). component(‘imageGrid’, < templateUrl: ‘image-grid/image-grid.template.html’, controller: function imageGridController($scope) < var divWidth = 510; var divHeight = 350; var imageList = angular.element(document.getElementsByClassName(«tiled-image»)); var imagesSet = []; angular.forEach(imageList, function(image) < imagesSet.push(< image: image, weight: image.width / image.height >); >, this); var sumOfWidth = function(set) < var totalWidth = 0; if (set.length >0) < for (var i = 0; i < set.length; i++) < totalWidth += set[i].image.width; >> return totalWidth; > var sumOfWeight = function(set) < var totalWeight = 0; if (set.length >0) < for (var i = 0; i < set.length; i++) < totalWeight += set[i].weight; >> return totalWeight; > var linearPartition = function(set) < var rows = Math.min(3, Math.ceil(set.length / 3)); set = set.sort( function(a, b) < return b.weight — a.weight >) var rowsArray = []; for (var i = 0; i < rows; i++) < rowsArray.push([]); >for (var l = 0; l < set.length; l++) < var rowsWeights = []; for (var i = 0; i < rowsArray.length; i++) < rowsWeights.push(sumOfWeight(rowsArray[i])); >var minIndex = 0, minValue = Infinity; for (var i = 0; i < rowsArray.length; i++) < if (rowsWeights[i] < minValue) < minValue = rowsWeights[i]; minIndex = i; >> rowsArray[minIndex].push(set[l]); > return rowsArray; > var setByRows = linearPartition(imagesSet); var rowsCount = setByRows.length; //console.log(setByRows); for (var i = 0; i < setByRows.length; i++) < var rowSize = sumOfWidth(setByRows[i]); for (var l = 0; l < setByRows[i].length; l++) < var image = setByRows[i][l].image; image.width = divWidth * (image.width / rowSize); image.height = divHeight / rowsCount; >> //console.log(setByRows); $scope.list = []; for (var i = 0; i < setByRows.length; i++) < for (var l = 0; l < setByRows[i].length; l++) < $scope.list.push(setByRows[i][l].image); >> console.log($scope.list); > >);
Сейчас буду разбираться с тем, почему изображения ракеты такое ужасное. По идее, оно не должно было так сильно покарёжется.
П.С. возможно, текущая реализация похожа на то, что говорил Zefick, просто я его не до конца понял.
#12
13:39, 23 авг 2016
Такс, вроде починил.
Осталось разобраться с тем, как считать кол-во строк (сейчас захардкодены три строки) и разобраться почему иногда один столбик на пиксель короче остальных.
#13
14:34, 23 авг 2016
RB деревья или октри деревья никто еще не предлагал? А может compute shaders сразу?Дожили.
Упаковщик сиквенсов анимаций в атласы явно тут не писал никто. Куда скатился геймдев.
#14
14:37, 23 авг 2016
Мух
> Упаковщик сиквенсов анимаций в атласы явно тут не писал никто. Куда скатился
> геймдев.
Да просто я не геймдевовец ни разу. Я ваще не знаю, как я на этом форуме очутился.
Источник: gamedev.ru
Как сделать мозаику в вк
Выбор хорошего главного изображения могут оказать огромное влияние на внешний вид вашей фотомозаики.
— Загружаемое изображение (фото) должно быть четким, контрастным, по возможности не содержать мелких, трудноразличимых деталей, надписей.
— При создании собственных наборов фотографий из которых будет собираться фотомозаика, загружаемые фотографии должны быть с разнообразными цветовыми оттенками. Так, фотомазаика будет более насыщенной и максимально отражать образ главного изображения. Так же следует понимать, что, чем больше фотографий загружено в набор, тем более качественным будет итоговое изображение. Мы рекомендуем загружать минимум 300-500 фотографий в набор.
— Используйте «Параметры фотомозаики» для изменения качества. Вы можете изменять такие параметры:
▪ Максимальный размер — максимальная ширина/высота в количестве фотографий;
▪ Размер ячейки (пиксели) — размер фотографий из набора в пикселях (максимальный 100х100);
▪ Прозрачность ячеек мозаики — прозрачность фотографий из набора, для сглаживания итогового изображения, увеличивайте его, если фотомозаика плохо отражает изначальный вариант фотографии.
Источник: picmosaic.ru