Как сделать resize изображения (php, js)?

Question

[Space]

Всем привет.
Вот я загружаю изображение и мне надо изменить размер в нескольких вариантах, при том, изображение не надо было ресайзить каждый раз. Еще чтобы они ресайзились в пропорциях (не искажались). Как лучше на php, js. Какие есть хорошие библиотеки на ваш взгляд?

Answer 1

[Иван Старков]

Лучшая штука www.imagemagick.org

Оберток для jscript и php полно,
https://www.npmjs.org/search?q=imagemagick

написать свою тоже не проблема

Comments

[Space]

@icelaba а есть библиотеки для создания редактора фото онлайн? или магик тоже пойдет для такого?

[Иван Старков]

Magic хоть и подойдет но это будет неадекватная нагрузка на сервер, хотя зависит от задачи, честно чисто клиентских библиотек по редактированию не использовал но гугление дает сразу www.ajax-image-editor.com
stackoverflow.com/questions/2282833/free-open-sour...

Или имеет смысл просто подключить шикарнейший
pixlr.com на свой сайт
pixlr.com/developer/include
Но я тоже с этим не работал

[Space]

pixlr.com он дает возможность ресайзить? и еще. я делаю отправку файла на js+ socket node.js. Магик для этого пойдет?

[Иван Старков]

magick подойдет для всего - он просто сконвертит файл :-) а уж с файлом делайте что душе угодно, я его использую в админках - для batch процессинга картинок, ресайзов, объединения картинок в одну, внедрения подписей и тп
c pixlr.com я не работал - просто это отличный редактор с каким то функционалом для размещения себя на чужих страничках, как работает этот функционал я не в курсе

[Space]

@icelaba да что-то зашел я на pixlr, а страница с редактором не открывается. :(

[Space]

и вот еще, что смутило. В хроме картинку примерно 100 на 100, уменьшаю в обычном тэге img через width and height. Качество уменьшенного изображения отличное, а мозиле файрфокс пиксельная картинка. Почему так*?

Answer 2

[Андрей]

Посмотрите внимательно сюда Как реализовать ресайз изображений на лету средствами php?
Ну и да, для ресайза imagemagic нормальная штука, да. Хотя можно использовать и nginx.

Comments

[Space]

Спасибо, но думаю ограничусь Imagemagic. Но nginx надо глянуть

Answer 3

[Алексей]

В браузере можно ресайзить, используя возможности canvas. Хоть в реальном времени, и с предпросмотром. Но готовых решений я лично не знаю...

Comments

[Space]

@Ganster41 а нагрузка кроссбраузерность?

[Алексей]

canvas обычно ускоряется за счет GPU, так что с нагрузками там все ок.
Кроссбраузерность... Нужна поддержка canvas, который был добавлен в HTML5. caniuse.com/#feat=canvas

[Space]

@Ganster41 оу, cool. Почитаю, гляну на что он способен. Спасибо