Создание миниатюры на стороне клиента

[RE_]

Всех приветствую!

Есть php галерея картинок в которой для создания миниатюр-thumbnail-ов используется GD. Памяти хоть и прилично хостинг дает, но некоторые изображения все равно слишком велики, памяти на них не хватает и создать тумбнейл в автоматическом режиме нельзя. ImageMagick подключить, понятно тоже нельзя, т.к. к конфигу php доступа нет.
В связи с этим вопрос - как создавать миниатюры больших картинок?

Пока есть несколько мыслей:
1) Может ImageMagickу нужно меньше памяти и его как-то можно встроить просто в php

2) Какая-то надстройка над GD которая бы разбивала картинки на части, делала бы миниатюры их, а потом склеивала бы:blink:

3) Создавать миниатюры яваскриптом на стороне клиента, а потом заливать их на сервер.

Последний вариант кажется мне наиболее нормальным. Но реализации я не нашел и с какой стороны подступится тоже не знаю. В этом (http://vredniy.ru/2010/08/uploadify-jcrop-php/) я не могу разобраться, может кто подскажет?
Может у jQuery такая функция есть?

Спасибо!

[kadabrik]

http://www.punypng.com/

[B@rmaley.e><e]

Создавать миниатюры яваскриптом на стороне клиента, а потом заливать их на сервер.alert('Создавать миниатюры яваскриптом на стороне клиента, а потом заливать их на сервер.'.replace('яваскрипт', 'флеш')) // нажми запустить для получения ответа

[RE_]

kadabrik,
*.jpg exceeded the maximum upload size of 350KB

B@rmaley.e><e,
можно конкретнее пожалуйста?

[kadabrik]

*.jpg exceeded the maximum upload size of 350KB

Ну значит не судьба, я всего лишь намекнул на существование 4 варианта. А вообще, если делать сжатие требуется на стороне клиента то наилучший вариант конечно же flash.

[x-yuri]

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

[RE_]

kadabrik, в смысле зарегить отдельный сайт с более убогим всем, но с неограниченной оперативной памятью. Мысль конечно интересная, но это думаю, крайний вариант.

Флеш, я его почти не знаю:( С другой стороны можно найти готовый скрипт. Может есть подходящий на примете?

x-yuri,
именно это я и обозначил как вариант №3. Проблема за малым - написать скрипт. А я даже не знаю, как яваскриптом сжать изображение.

[x-yuri]

нет, я не имел в виду клиентскую сторону и не имел в виду javascript. Хотя может и на нем можно

[RE_]

В смысле мне их скачивать сжимать фотошопом, например, и обратно заливать?)
Не, ну понятно можно и программку написать, которая бы взаимодейтвовала с сервером, но это равносильно. Нужна автоматизация

[kadabrik]

Флеш, я его почти не знаю:( С другой стороны можно найти готовый скрипт. Может есть подходящий на примете?

http://www.adylevy.com/index.php/2009/06/07/client-side-image-resize-flash-cs4-filereferencedata/

[x-yuri]

я просто забыл, что речь идет о загрузке изображений пользователями. В этом случае - да, кроме flash альтернатив не знаю

если еще актуально, можешь мою реализацию (http://javascript.ru/forum/showthread.php?p=85146#post85146) попробовать

[dmitriymar]

3) Создавать миниатюры яваскриптом на стороне клиента, а потом заливать их на сервер.
можно-но есть там куча моментов

[RE_]

kadabrik, x-yuri, попробую, но привязка флеша займет определенное время.

dmitriymar, можно? А можно пример или хотя бы методы/функции нужные?

[dmitriymar]

пример не дам-сам сейчас в процессе. но скажу как-изображение в канву соответсвующего размера и скриншот.

canvas.toDataURL("image/png") возвращает base64-кодированный PNG-«скриншот» канвы. и отправить на сервер уже файл нужного размера.

в канву положить изображение-через форму выбора файла-ложиться но есть свои моменты чтобы он отобразился на канве. к ие прийдётся добавить поддержку канвы-так что в принципе метод кросбраузерный.сам долго искал варианты этого-на этом форуме. в итоге удалось собрать ориент. алгоритм. сейчас только ложит в канву файл -скриншот и отправку на сервер ещё не делал.

[dmitriymar]

вот текст полного ответа какой я получил по скриншоту из канвы
canvas.toDataURL("image/png") возвращает base64-кодированный PNG-«скриншот» канвы. Отослать его на сервер, разобрать в php base64, и вуаля. Если хочется, можно сохранить строку в файл. Если хочется, можно скормить её GD и сделать jpg.

[kadabrik]

Canvas не будет работать в IE ниже 9 версии, тоесть в большинстве ослов на сегодня.

[dmitriymar]

kadabrik,
растрою ,канва работает в ie ниже 9 версии-нужно библиотеку полключить и експлорер начинает работать с канвой и всеми её функциями
excanvas.js -одна из библиотек раелизующих канву в експлорере
есть ещё библиотека полной поодержки

[RE_]

dmitriymar, канвас - хорошая мысль.
Правда пока нашел простенький вариант (на php), который конечно не решает проблемы, по позволяет ее обойти в некоторых случаях.
Мы тянем превьюшку, которая встроена в jpg, и работаем с ней:


if(exif_thumbnail($tmpname)) {
$image_tmp = exif_thumbnail($tmpname, $width, $height);
$image = imagecreatefromstring($image_tmp);
imagecopyresampled(
$thumb, $image, 0, 0, 0, 0,
$tsize[0], $tsize[1], $width, $height
);
}


Правда это работает только с включенным на сервере exif и только если в картинке есть превьюшка, поэтому вариант не окончательный.
Постараюсь что-нибудь придумать с канвасами.
x-yuri, добавление флеш заливки не очень хороший вариант(я это не упомянул) т.к. желательно было бы генерировать тумбнейлы в первую очередь при массовой заливке с ftp. Если никак не получится, то буду пытаться использовать этот вариант.

[dmitriymar]

я ща просто налетел на то что при выборе файла-он отображается(тоесть его можно отобразить на странице ) в сафари, ие ,фф. а вот в опере и хроме нет. причину вижу в том что те браузеры-отображают только название файла -скрывая путь-если присваивать путь из строки выбора переменной-но работает с полным ,а хром и опера пишет путь при присваивании на манер-с:\fakepath\ -причём неважно на каком диске лежит изображение -всё равно будет диск с /фкепатч/имя файла.вот сейчас думаю как с:\fakepath\ обойти -если пройдёт что при убирании его будет работать как и в остальных браузерах-тогда норм. но вот если они скрывают путь этим-тогда всё станет. а вот остальная реализация-уменьшение в размерах,отправка на сервер -это не проблема

[x-yuri]

x-yuri, добавление флеш заливки не очень хороший вариант(я это не упомянул) т.к. желательно было бы генерировать тумбнейлы в первую очередь при массовой заливке с ftp. Если никак не получится, то буду пытаться использовать этот вариант.
ну, и к чему тогда вот это было?
В смысле мне их скачивать сжимать фотошопом, например, и обратно заливать?)
Не, ну понятно можно и программку написать, которая бы взаимодейтвовала с сервером, но это равносильно. Нужна автоматизация
пишешь php-скрипт, который автоматически заливает на ftp картинки, генерирует для них эскизы и тоже заливает на ftp

[dmitriymar]

не знаю у меня таже проблемма-на серваке это делать-просто всё. но при паралельной оработке нескольких десятков не считая других задач -сервак так конкретно тормозит так что или канва или флеш. флеш учить нужно-согласен что в принципе под одну задачу +форумы-это много времени не займёт-но с другой стороны и какнва в пятом и поддержка аудио и видио официальная-так что флеш наверно останется для мультипликации и всё..

[dmitriymar]

канва наверное отпадает-поскольку сегодня в фф перестало работать отображение картинки если она не лежит в одной папке со страницей(гляну конечно что будет если страницу с сервера вызывать) хотя ещё с утра работало с отображаемой частью пути как с целым путём:blink:

[RE_]

ну, и к чему тогда вот это было?


К тому что массово заливаешь все файлы, а отдельно, скажем через флеш, "неформатные"
пишешь php-скрипт, который автоматически заливает на ftp картинки, генерирует для них эскизы и тоже заливает на ftp
Не, ну я могу взять АЦДСии, сгенерировать тумбнейлы и залить. Но во-первых, все равно нужно продумывать названия, писать скрипт добавления в БД, а во-вторых, это же убого. Хочется сделать по нормальному, извиняюсь если это желание кажется наглым :)

А я опять натолкнулся на очередной трабл:
я не могу определить можно создать эскиз нормальным способом или нет.

На входе в функцию стоит проверка на вес и размеры картинки, большинство картинок она отсеивает, но если картинка хорошо ужата, пусть и большого размера (2500х2000=500кб) то проходит как "нормальная".
php функция createimagefromstring() пытается выполнится и вылетает.
Пытался загнать ее try catch, перестает работать вообще все:blink:
загоняю в if эффекта 0.
Как ошибку отловить - понятия не имею.

[x-yuri]

В смысле мне их скачивать сжимать фотошопом, например, и обратно заливать?)
Не, ну понятно можно и программку написать, которая бы взаимодейтвовала с сервером, но это равносильно. Нужна автоматизация
К тому что массово заливаешь все файлы, а отдельно, скажем через флеш, "неформатные"
ты можешь внятно объяснить, как файлы попадают на сервер? Только ты их туда заливаешь?

Но во-первых, все равно нужно продумывать названия
на третьей странице мы выяснили, что не все можно автоматизировать

Не, ну я могу взять АЦДСии... [но] это же убого.
я тоже так считаю

я не могу определить можно создать эскиз нормальным способом или нет.
getimagesize?

я не могу определить можно создать эскиз нормальным способом или нет.
нормальный способ - это когда ты можешь можешь на сервере создавать эскизы для фотографий любого нужного размера

[dmitriymar]

Но во-первых, все равно нужно продумывать названия
на третьей странице мы выяснили, что не все можно автоматизировать
можно автоматизировать-но без сервера при этом никак
нормальный способ - это когда ты можешь можешь на сервере создавать эскизы для фотографий любого нужного размера
почему не искать варианты разгрузить сервер?если можно при этом обходится более дешевым хостингом а не использовать десятки серверов

[x-yuri]

почему не искать варианты разгрузить сервер?
если речь идет о создании эскизов для имеющихся на сервере фотографий: потому что надо сначала, выяснить, какой эффект будет от такой разгрузки. Если человек, который считает (http://php.spb.ru/php/speed.html) количество знаков в имени переменной, говорит (http://phpclub.ru/talk/threads/Как-разгрузить-процессор.60427/#post-528087), что "У меня задачи на ресайз сотен тысяч фоток за раз, что разгребается за полдня под полной нагрзукой.", то это повод задуматься

а весь этот разговор в пределе выглядит так: "хочу разместить youtube на бесплатном виртуальном хостинге"...

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

[dmitriymar]

ну да согласен.ну если програмист при этом он сам то стоит тратить время-не на трубу конечно)

[RE_]

ты можешь внятно объяснить, как файлы попадают на сервер? Только ты их туда заливаешь?
Это картинная галерея. Пока заливаю я, но предполагается, что будут заливать и обычные пользователи.
Я могу заливать двумя способами:
1) как все через форму - выбрал файл=>нажал залить.
2) залить много картинок на ftp и нажать "добавить папку с ftp"
К способу 1 можно прикрутить флеш-загрузчик. Но способ 2 все равно нужен, т.к. нужно залить около 5к файлов и предполагается заливать еще до сотни разом.
Все на любительском уровне на бесплатном хостинге (потому и ограничение памяти), хотя это не значит что я потом не докуплю платный. Просто я не особо знаком с тем как делаются проекты и думаю что по началу пусть висит на бесплатном, как доделаю, можно будет уже на платный переезжать.

на третьей странице мы выяснили, что не все можно автоматизировать
Я имел ввиду что файлы заливаются не просто кучей, а в папки особым образом, по именам хешей, тумбнейлы также. Так что всю эту логику (пусть и не хитрую) нужно разбирать и прописывать(копировать) мне показалось легче и лучше решить проблему с тумбнейлами - в конце концов можно залить большинство, а с проблемными потом разобраться отдельно их одна на пару сотен.
И нет, я не могу залить эти единицы в ручную просто так из-за алгоритма добавления, который я выше описал.

getimagesize
т.е. ты предлагаешь просто фильтровать большие изображения не разобравшись в причине? Мой перфекционизм негодуе!
Хотя наверно это самый легкий и правильный вариант.
Ну неужели нет более нормального решения чем костыль?

нормальный способ - это когда ты можешь можешь на сервере создавать эскизы для фотографий любого нужного размера
Не, ну понятно что я упираюсь в недостаток памяти. Для всех jpgов я его обошел, создавая эскизы из встроенных тумбнейлов. Осталась эта непонятная проблема.

"время программиста стоит дороже"
В данном случае я не только программирую, а еще и учусь, поэтому хочется сделать все по нормальному. Хотя нет, мне всегда хочется сделать все по нормальному :)

[x-yuri]

Я имел ввиду что файлы заливаются не просто кучей, а в папки особым образом, по именам хешей, тумбнейлы также.
(мысли вслух) хотелось бы знать, как их оптимально по папкам расположить...

Так что всю эту логику (пусть и не хитрую) нужно разбирать и прописывать(копировать) мне показалось легче и лучше решить проблему с тумбнейлами - в конце концов можно залить большинство, а с проблемными потом разобраться отдельно их одна на пару сотен.
т.е. надо, чтобы картинки заливались на ftp в оригинальном размере, а потом при "добавлении папки" создавались эскизы? И надо сделать, чтобы все эскизы создавались именно при добавлении папки? Ну, пожалуйста: создаешь все эскизы которые можешь на сервере, а оставшиеся по одному отправляешь на клиент, где flash их ресайзит и отправляет обратно на сервер

Нормальное решение: картинки ресайзятся перед заливкой на ftp, автоматически, и сразу заливаются. Тебя смущает дублирование логики? не дублируй ее: сделай чтобы скрипт и "добавление папки" использовали общий код

т.е. ты предлагаешь просто фильтровать большие изображения не разобравшись в причине? Мой перфекционизм негодуе!
Хотя наверно это самый легкий и правильный вариант.
Ну неужели нет более нормального решения чем костыль?
причина известна: закончилась память. Поищи, если хочешь...

В данном случае я не только программирую, а еще и учусь, поэтому хочется сделать все по нормальному.
надо только не ошибится в выборах критериев "нормальности" ;) как видим, на одно нормальное решение нету денег

попробуй на всякий случай ini_set("memory_limit", "...M")

[RE_]

(мысли вслух) хотелось бы знать, как их оптимально по папкам расположить...
про оптимальность думаю тут речь не идет)

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

Ну, пожалуйста: создаешь все эскизы которые можешь на сервере, а оставшиеся по одному отправляешь на клиент, где flash их ресайзит и отправляет обратно на сервер
Да, именно так я и собирался(юсь) сделать. Правда проблему реализации диалога с флеш отодвинула на второй план проблема невозможности отловить "неправильные" изображения.
Я склоняюсь к созданию отдельной заливки вручную.

Нормальное решение: картинки ресайзятся перед заливкой на ftp, автоматически, и сразу заливаются.
я не делал систему, я просто пытаюсь устранить один недостаток.

а! система shimmie2 (http://code.shishnet.org/shimmie2/) если интересно.
попробуй на всякий случай ini_set("memory_limit", "...M")
попробую, хотя вряд ли на серьезном хостинге будет такая бага)

[x-yuri]

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

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