Сообщество
Логин
Пароль
Забыли пароль?     Регистрация
Ещё проектики
Рабочее время
Минималистичный счётчик рабочего времени онлайн
Общение / Веб версия / Загрузка иконок

Загрузка иконок

Ilyan
2 января 2014 22:49
Полупрозрачные png конвертируются с потерями.
Admin
 
3 января 2014 11:13
Ответили вам в другой теме.
Покажите на всякий случай вашу иконку (лучше в бОльшем разрешении нежели 42х42), посмотрим может что-то можно сделать.
Ilyan
5 января 2014 11:53
А может лучше вы расскажете ВСЕ требования к иконке, и я загружу её без конвертации?
Ilyan
5 января 2014 11:54
Может так: если размер иконки 42х42, берите её "как есть", если другой - конвертируйте.
Ilyan
5 января 2014 11:55
* загрузил 32х32 - все равно при добавлении рамки полупрозрачность пропала.
Admin
 
5 января 2014 12:19
Без конвертации не получится, рамка быть должна, чтобы иконки выглядели единообразно.
Покажите вашу иконку, подумаем, что можно сделать.
Ilyan
5 января 2014 13:12
Скажите, какая рамка вам нужна, я все сделаю сам, раз у вас не получается.
Не будете же вы каждую иконку вручную смотреть и думать, что можно сделать.
Или вам нужна И иконка 42х42 с прозрачными полями, И в каком-то другом размере?

Иногда ваша забота о пользователях делает только хуже.

Так и сказали бы: нужна иконка в формате png размером 42х42, в которой со всех сторон РЕКОМЕНДУЮТСЯ прозрачные отступы 5px. Любые другие размеры и форматы будут сконвертированы в иконку 32х32 и к полученной иконке будут добавлены прозрачные поля.

И все - после этого забота о "единообразности" - забота пользователя. Но при этом у пользователя есть возможность загрузить иконку, которая не будет переконвертирована с потерями.
Admin
 
5 января 2014 13:56
Ilyan Пишет:
забота о "единообразности" - забота пользователя
С этим согласиться нельзя.
К тому же преобразование нужно ещё и по другим причинам.

Если сможете таки привести пример иконки с неверным преобразованием - попытаемся проблему решить.
Ilyan
5 января 2014 14:02
Admin Пишет:
К тому же преобразование нужно ещё и по другим причинам.
Я готов соответствовать любым вашим требованиям к иконкам :)


Вот пример иконки 32х32 с частичной прозрачностью:

https://drive.google.com/file/d/0By50NczJWxY2cFUzd053LWhrZzA/edit?usp=sharing
Admin
 
5 января 2014 17:49
Что же с ней не так?
Вроде нормально загружается.. без микроскопа особых искажений не видно.
Ilyan
5 января 2014 18:30
Спорить не буду - узнать оригинал в конвертируемой иконке не проблема.

Но искажения есть, и достаточно заметные даже без микроскопа:
https://drive.google.com/file/d/0By50NczJWxY2eV9ONGRRZ3B1bVk/edit?usp=sharing


На более сложной картинке искажения будут более критичными - например, мелкие полоски на иконке Сбербанка потерялись бы полностью.
Ilyan
5 января 2014 18:37
Объясните, пожалуйста, что именно и как вы делаете с загруженными иконками.

Храните ли вы одну и ту же иконку в разных размерах? Если нет, то почему нельзя определить канонический размер/формат, который вы не будете трогать?


Не понимаю, почему вы посчитали возможным определить свой формат импорта, не заботясь о том, как именно пользователи приведут к нему свои данные, но не хотите сделать то же самое для иконок.
Ilyan
6 января 2014 19:20
Почините конвертацию, скорее, пожалуйста - я уже столько красивых иконок нарисовал... :)
x35bug
8 января 2014 16:44
Admin Пишет:
без микроскопа особых искажений не видно.
https://docs.google.com/file/d/0B5-UR_bmlHWdcTk3ME9RcUotaDQ/edit

После заливки даже не сразу можно понять, что это именно та картинка

http://www.drebedengi.ru/gif.htm?icId=353
Admin
 
8 января 2014 21:20
x35bug Пишет:
После заливки даже не сразу можно понять, что это именно та картинка
Да, с чёрным цветом косяк ещё заметнее.. будем думать.
Ilyan
8 января 2014 22:47
Да расскажите уже, что именно вы делаете - может быть за вас все придумают...
Admin
 
9 января 2014 00:00
Да пожалуйста:

$imageDst = $imageSrc = imagecreatefromstring(...);

/**
* Само изображение должно быть размером 42х42, но при этом у него должна
* быть прозрачная рамка толщиной 5 пикселей, поэтому исходное изображение
* пропорционально сжимаем, чтобы оно влезало в квадрат 32х32, а затем
* накладываем на прозрачный квадрат размером 42х42.
*/
$maxWidth = $width = 32;
$maxHeight= $height = 32;
if ($height_orig != $maxHeight || $width_orig != $maxWidth) {
$imageDst = imagecreatetruecolor($maxWidth, $maxHeight);
/**
* Сохранить прозрачность исходного изображения
*/
if($imgType == "gif" || $imgType == "png"){
imagecolortransparent($imageDst, imagecolorallocatealpha($imageDst, 0, 0, 0, 127));
imagealphablending($imageDst, false);
imagesavealpha($imageDst, true);
}
$width = $imageinfo[0];
$height= $imageinfo[1];
if ($width > $maxWidth || $height > $maxHeight) {
$ratio_orig = $width_orig/$height_orig;

if ($maxWidth/$maxHeight > $ratio_orig) {
$width = $maxHeight*$ratio_orig;
$height = $maxHeight;
}
else {
$height = $maxWidth/$ratio_orig;
$width = $maxWidth;
}
}
// Resample
imagecopyresampled($imageDst, $imageSrc, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
$imageSrc = $imageDst;
}

$imageDst= imagecreatetruecolor(42, 42);
$black= imagecolorallocate($imageDst, 0, 0, 0);
imagealphablending($imageDst, false);
imagecolortransparent($imageDst, $black);
imagecopyresampled($imageDst, $imageSrc, 5 + (int)(($maxWidth - $width)/2), 5 + (int)(($maxHeight - $height)/2), 0, 0, $maxWidth, $maxHeight, $maxWidth, $maxHeight);
$imageSrc = $imageDst;

imagepng($imageSrc, PATH);
Ilyan
9 января 2014 07:55
Вот здесь есть похожий пример:

http://il1.php.net/manual/en/function.imagecopyresampled.php#104028

// preserve transparency
if($type == "gif" or $type == "png"){
imagecolortransparent($new, imagecolorallocatealpha($new, 0, 0, 0, 127));
imagealphablending($new, false);
imagesavealpha($new, true);
}


P.S.

"Критиковать — значит доказывать автору, что он не сделал этого так, как сделал бы я, если б умел." ;)
Ilyan
9 января 2014 08:06
Ха, так вы тоже использовали этот код!

Но почему-то только для приведения к размеру 32х32, а надо в обоих случаях перед вызовом imagecopyresampled

Хотя вообще-то можно обойтись и одним вызовом imagecopyresampled
Ilyan
9 января 2014 08:17
Мне кажется, достаточно такого:

$imageSrc = imagecreatefromstring(...);

/**
* Само изображение должно быть размером 42х42, но при этом у него должна
* быть прозрачная рамка толщиной 5 пикселей, поэтому исходное изображение
* пропорционально сжимаем, чтобы оно влезало в квадрат 32х32, а затем
* накладываем на прозрачный квадрат размером 42х42.
*/

$imageDst = imagecreatetruecolor(42, 42);
imagecolortransparent($imageDst, imagecolorallocatealpha($imageDst, 0, 0, 0, 127));
imagealphablending($imageDst, false);
imagesavealpha($imageDst, true);

imagecopyresampled($imageDst, $imageSrc, 5, 5, 0, 0, 32, 32, $imageinfo[0], $imageinfo[1]);

imagepng($imageDst, PATH);
Admin
 
9 января 2014 11:35
Ilyan Пишет:
Мне кажется, достаточно такого
Сделайте, протестируйте и тогда предлагайте.
Не флудите понапрасну :).
Ilyan
9 января 2014 15:00
Ладно, вот вам рабочий, протестированный вариант.
Пожалуйста, не тяните с внедрением.

$imageDst = imagecreatetruecolor(42, 42);
imagefill($imageDst,0,0,0x7f000000);
imagecopyresampled($imageDst, $imageSrc, 5, 5, 0, 0, 32, 32, 32, 32);
imagealphablending($imageDst, false);
imagesavealpha($imageDst, true);
Ilyan
9 января 2014 15:08
И последний фикс:

$imageSrc = imagecreatefromstring(...);

$imageDst = imagecreatetruecolor(42, 42);
imagefill($imageDst,0,0,imagecolorallocatealpha($imageDst, 0, 0, 0, 127));
imagecopyresampled($imageDst, $imageSrc, 5, 5, 0, 0, 32, 32, imagesx($imageSrc), imagesy($imageSrc));
imagealphablending($imageDst, false);
imagesavealpha($imageDst, true);

imagepng($imageDst, PATH);
Admin
 
9 января 2014 15:25
Это не рабочий вариант.
1. Не сохраняются пропорции иконок.
2. Иконка https://docs.google.com/f.../edit - загружается также криво как и сейчас.
3. Иконка https://drive.google.com/...aring загружается также криво как и сейчас.

Приятно? :)
Ilyan
9 января 2014 16:02
Конечно приятно - отвечают ведь, реагируют, проверяют, делают...

Не то что "Спасибо, подумаем", как иногда бывает :)
Ilyan
9 января 2014 16:11
Должно работать :) (ведь так правильно отвечать? :)

Серьёзно, на отдельном скрипте у меня все работает.

Может у вас какие-то параметры при сохраненени png?
Ilyan
9 января 2014 17:58
Admin Пишет:
1. Не сохраняются пропорции иконок.
Да, эта фича не работает. Но зачем сохранять пропорции иконок?
Чем кадрирование и сжатие предпочтительней неравномерного сжатия? Честно говоря, если размер картинки будет отличаться от 32х32, в большинстве случаев конечный результат все равно будет неудовлетворительный (ну, разве что 64х64 или 128х128 будут поудачнее).

Но если вам хочется, оставьте ваш код, вычислите нужную вам область, и вызовите imagecopyresampled с другими параметрами (но 1 раз!).
Ilyan
9 января 2014 17:59
Вот скрипт, который работает (PHP 5.3.28), дальше я уже и не знаю, чем помочь :)

https://drive.google.com/file/d/0By50NczJWxY2OGtPcWZmNkt2c00/edit?usp=sharing
Admin
 
9 января 2014 20:27
Ilyan Пишет:
Но зачем сохранять пропорции иконок?
Это вы объясните тем, кто будет загружать иконки узкие и длинные (или высокие и тонкие).

Однако бага нашлась, помимо загрузки есть ещё модуль отображения, и там были свои хитрости.

Доработали ваш вариант до сохранения пропорций, теперь всё ок.
Однако некоторые загруженные ранее иконки теперь могут отображаться не верно. Их нужно удалить и загрузить заново.
Ilyan
9 января 2014 21:29
Admin Пишет:
Это вы объясните тем, кто будет загружать иконки узкие и длинные (или высокие и тонкие)
Отлично. Тогда и вы мне объясните:

<режим наивного юзера>
Я загрузил узкую и длинную иконку.

Объясните, мне почему она обрезалась, хотя очевидно же, что я хотел, чтобы она сжалась.
</режим наивного юзера>
Admin
 
9 января 2014 21:51
Ilyan Пишет:
почему она обрезалась
Как так обрезалась?
Не должно такого быть, покажите плз скриншоты.
Ilyan
9 января 2014 22:11
Admin Пишет:
Как так обрезалась?
Извините, написал не проверив.
Ilyan
11 января 2014 12:52
Я тут подумал, что для более точного сжатия иконок все-таки лучше вызывать imagecopyresampled 2 раза. Это имеет небольшой практический интерес, но тем не менее:

Предлоложим, что загруженная картинка имеет размер 100х600. Сейчас она сожмется в область 5х32 (или может быть даже в 6х32 или 4х32, если есть требование центральной симметрии). В любом случае, сжатие по вертикали/горизонтали будет немного неравномерным.

Но можно провести конвертацию в 2 этапа: сначала без потерь добавить прозрачные края, увеличив размер до 600х600, и только потом 100% пропорционально ужать до 32х32.

Ещё одна хитрость, которая возможно улучшит качество сжатой иконки - добавить прозрачные поля до размера, кратного 32 (или хотя бы 16 или 8, если иконка совсем немного больше 32) . Например, для иконки 100х600 добавить прозрачные поля до размера 608х608. Тогда при сжатии каждому пикселю будет соответствовать целый, ровный блок оригинальной картинки (в примере - 19х19).
Anton
11 января 2014 15:57
Я тут по случаю нарисовал иконку черной мастер-кард Тинькова. Если надо кому, забирайте:
https://drive.google.com/file/d/0By1gJmytZJ3vbHRpcmF3WF9Odm8
Ilyan
15 января 2014 15:32
Админ, ваша иконка VISA вылезает за определённые вами поля в 5px: при размере 42х42, только 3px слева, и 4px справа.

Почему для пользовательских иконок другие требования?
Что делать с тем, что ваша иконка и мои не выглядят "единообразно"?
Admin
 
15 января 2014 16:42
Ilyan Пишет:
иконка VISA вылезает за определённые вами поля в 5px
Если сделайте такую же иконку 32х32 - поменяем в стандартных.
Ilyan
15 января 2014 19:29
Вообще-то, в новом логотипе VISA нет синей и золотой полосы...
Хотя все наверняка к ним уже привыкли...

Посмотрите мои последние загруженные иконки:

Обычный логотип
https://www.drebedengi.ru...d=630

Вытянутый на 20% по вертикали
https://www.drebedengi.ru...d=631
Admin
 
15 января 2014 19:33
Эти ссылки доступны только вам, лучше выложите куда-то.
Ilyan
15 января 2014 19:42
Ещё я все думаю, не было бы удобнее, если бы иконки были не квадратные, а вытянутые по горизонтали.

С одной стороны, некоторые логотипы можно были бы нарисовать заметно четче и крупнее - те же VISA и Mastercard, и вообще, подавляющее большинство иконок заполняли бы всю возможную высоту.

С другой стороны, увеличение возможного разброса по реально занятой ширине, приведёт к ещё более неравномерному выравниванию по вертикали.
Ilyan
15 января 2014 19:44
Добавил к своей коллекции иконок:

https://drive.google.com/folderview?id=0By50NczJWxY2NlJBakg2OGZrWUk&usp=sharing
1 2  Туда  
Чтобы отвечать на сообщения - зарегистрируйтесь и войдите в личный кабинет.