Есть мысль ресайзить толстые картинки прямо в браузере, и я ее всячески думаю. Пока заколбасили довольно шустрый ресайзер с ланцешевским фильтром. Из недостатков - фик знает, что с гамма-коррекцией, в яваскрипте просто нет к ней доступа, если не парсить jpeg вручную. Ну и слегка налажал в unsharp mask на финальной корректировки яркости - если эффект сделать максимальным, то видно что цвета плывут. Надеюсь в скором времени починить.
В общем, что могу сказать… Наверное профессиональные фотки таким обрабатывать не стоит, но для наших котиков должно хватить за глаза. Из плюсов - у пользователей сокращается время загрузки и уменьшается траффик. Ну и заодно нагрузка на сервер слегка снижается.
Библиотека от нодеки не зависит, так что кому надо - пользуйтесь на здоровье. Минимальные требования - любой современный браузер с поддержкой канваса. А если там еще и вебворкеры есть - будет скейлить в отдельном потоке, чтобы не тормозить интерфейс.
UPD. Для тех кто не в курсе про фильтры ланцеша. Обычно люди считают, что кактинки через канвас ресайзить можно. Ну можно, только фигово. Канвас использует nearest neighbor фильтр для скорости, и картинка пикселируется. Результат можно увидель в демке, на нижней картинке. В pica все сделано честно, на нанотехнологиях. Для реалтайма это конечно не подойдет, но для аплоадов самое то.
Посмотрите www.plupload.com
Умеет и ресайзить в браузре, и большие файлы по частям загружать.
Сам пользую.
Там типа унылое говно, которое можно посмотреть в демке в левой колонке, внизу 😃 . Типа, у меня качественно, а не для галочки. А поддержка старых браузеров через флеш мне не актуальна уже.
на андроиде (4.4.4) падает браузер после выбора файла =)
Бывает такая фигня. У андроида странный менеджер памяти. После толстых игрушек у меня тоже мобилка дурит. Какой телефон и какой размер файла?
планшет nexus 7 (2013)
upd. с третьей попытки все заработало. ресайзит вполне сносно, даже большую часть эстетов удовлетворит, я думаю. с ближним соседом не сравнить - на 2 порядка лучше. файл 1900 на 2800 примерно
Нормальный девайс. 1900*2800*4 = 21 мегабайт надо, чтобы загрузить. Странно что валится. Ну пока нодеку допилим, глядишь и ондроеды подкрутят. На крайняк отключу для мобилок, если совсем жопа будет.
А ближний сосед это кто? Оригинал (слева) на ретиновских дисплеях в 2 раза выше плотность имеет, поэтому с ним сравнивать не корректно. Еще для сравнения лучше unsharp amount убрать,
Так JS врукопашную к ARGB доступ может иметь, для реального времени конечно не удобно, но разовые операции с жирными растрами - даже на мобилках и планшетах мгновенно делает.
Чтобы врукопашную не распарсивать - в невидимый канвас 1:1 картинку орисовать, а потом уже из его растра выковыривать и перековыривать 😃
{"assets_hash":"a8b26fa7f6e768b07a72c8c9aadb9422","page_data":{"users":{"39c21abc3df9550077797d18":{"_id":"39c21abc3df9550077797d18","hid":349,"name":"Vitaly","nick":"Vitaly","avatar_id":null,"css":""},"3ff69d1e3df95500777955a3":{"_id":"3ff69d1e3df95500777955a3","hid":2659,"name":"ADF","nick":"ADF","avatar_id":null,"css":""},"4549b5e83df9550077788371":{"_id":"4549b5e83df9550077788371","hid":17947,"name":"Boev_Dmitry","nick":"Boev_Dmitry","avatar_id":null,"css":""},"4ffd28a33df95500777423c5":{"_id":"4ffd28a33df95500777423c5","hid":122227,"name":"paradoxst","nick":"paradoxst","avatar_id":null,"css":""}},"settings":{"blogs_can_create":false,"blogs_mod_can_delete":false,"blogs_mod_can_hard_delete":false,"blogs_mod_can_add_infractions":false,"can_report_abuse":false,"can_vote":false,"can_see_ip":false,"blogs_edit_comments_max_time":30,"blogs_show_ignored":false,"blogs_reply_old_comment_threshold":30,"votes_add_max_time":168},"entry":{"_id":"542923499970730077110b38","hid":19483,"title":"Ресайзилка картинок для браузера","html":"<p>Тынц: <a href=\"http://nodeca.github.io/pica/demo/\" class=\"link link-ext link-auto\" data-nd-link-type=\"autolink\" data-nd-link-orig=\"http://nodeca.github.io/pica/demo/\" target=\"_blank\" rel=\"nofollow noopener\">nodeca.github.io/pica/demo/</a></p>\n<p>Есть мысль ресайзить толстые картинки прямо в браузере, и я ее всячески думаю. Пока заколбасили довольно шустрый ресайзер с ланцешевским фильтром. Из недостатков - фик знает, что с гамма-коррекцией, в яваскрипте просто нет к ней доступа, если не парсить jpeg вручную. Ну и слегка налажал в unsharp mask на финальной корректировки яркости - если эффект сделать максимальным, то видно что цвета плывут. Надеюсь в скором времени починить.</p>\n<p>В общем, что могу сказать… Наверное профессиональные фотки таким обрабатывать не стоит, но для наших котиков должно хватить за глаза. Из плюсов - у пользователей сокращается время загрузки и уменьшается траффик. Ну и заодно нагрузка на сервер слегка снижается.</p>\n<p>Библиотека от нодеки не зависит, так что кому надо - пользуйтесь на здоровье. Минимальные требования - любой современный браузер с поддержкой канваса. А если там еще и вебворкеры есть - будет скейлить в отдельном потоке, чтобы не тормозить интерфейс.</p>\n<!--cut-->\n<p><strong data-nd-pair-src=\"**\">UPD</strong>. Для тех кто не в курсе про фильтры ланцеша. Обычно люди считают, что кактинки через канвас ресайзить можно. Ну можно, только фигово. Канвас использует nearest neighbor фильтр для скорости, и картинка пикселируется. Результат можно увидель в демке, на нижней картинке. В pica все сделано честно, на нанотехнологиях. Для реалтайма это конечно не подойдет, но для аплоадов самое то.</p>\n","user":"39c21abc3df9550077797d18","ts":"2014-09-29T09:15:53.000Z","st":1,"cache":{"comment_count":7,"last_comment":"542a011699707300771321b3","last_comment_hid":7,"last_ts":"2014-09-30T01:02:14.000Z","last_user":"3ff69d1e3df95500777955a3"},"views":885,"bookmarks":0,"votes":0},"subscription":null},"locale":"en-US","user_id":"000000000000000000000000","user_hid":0,"user_name":"","user_nick":"","user_avatar":null,"is_member":false,"settings":{"can_access_acp":false,"can_use_dialogs":false,"hide_heavy_content":false},"unread_dialogs":false,"footer":{"rules":{"to":"common.rules"},"contacts":{"to":"rco-nodeca.contacts"}},"navbar":{"tracker":{"to":"users.tracker","autoselect":false,"priority":10},"forum":{"to":"forum.index"},"blogs":{"to":"blogs.index"},"clubs":{"to":"clubs.index"},"market":{"to":"market.index.buy"}},"recaptcha":{"public_key":"6LcyTs0dAAAAADW_1wxPfl0IHuXxBG7vMSSX26Z4"},"layout":"common.layout"}
