Pull to refresh

Comments 88

Загрузил большую картинку Плутона на jsbin.com — при всех вариантах канваса меньше 300px граница планетоида — лесенка, никакого сглаживания и в помине.

Уверены, что включили флаг: chrome://flags/#enable-experimental-canvas-features?


Черт, Хабр кушает ссылки на флаги. Сейчас в статье поправлю.

Ага, теперь одна лесенка и 2 мыла

У вас на тестовом стенде <img> ровно в два раза меньше <canvas>-а. Наверное, из-за HiDPI.

После того как подвинете рычажок, всё должно стать одинаково.

До того, как я подвинул рычажок — там вообще ничего не рисуется.


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


Причём это ещё и не зависит от масштаба.

Ой, понял где ошибка. Просто я все время загружал квадратные картинки. Благодарю!

Во, теперь стало нормально, спасибо. =)

«Доктор, а откуда у вас такие картинки?»
первый комментарий который пытается возразить не молча. Вы про то что человек проецирует чтоли?
Просто напомнило анекдот, так как не вижу на фотографии в посте «несовершеннолетнего, совершающего либо имитирующего половое сношение или иные действия сексуального характера» или что-то ещё из списка по приведённой ссылке (в том числе хентай).
У вас просто воображение неразвито. Руками-то она за что держится, по-вашему? А??
У вас писька головного мозга.
Фублять… Я говорю, за скамеечку какую-нибудь она держится, или может коленку себе чешет. Вот кем надо быть, чтобы возникла ассоциация с писькой?! Мне противно находиться на одном ресурсе с такими, как вы…
Я к тому, что
Дайте мне всего шесть строк, написанных рукой самого честного человека, и я найду, за что его можно повесить.
— Арман Жан дю Плесси Ришелье.
Картиночка есть? Есть. Юная девочка на ней есть? Есть. Осталась самая мелочь — правильные™ эксперты, которые найдут в картинке всё, что требуется. Пример их работы уже имеется.
Вы всерьёз полагаете, что за картинку в посте автора могут привлечь? Сколько на это поставите и с каким коэффициентом?
Если же невсерьёз, а лишь как повод пообсуждать, то, может, сам закон стоит обсуждать в более уместных постах?

Потому что бред несёте. На картинке — одетая счастливая девочка, это разрешено законом. А мизулопетросянство к этому посту не имеет вообще никакого отношения.

Ну не, нельзя в таком контексте про детей писать: "«Это Маня», «Врачи поставили диагноз». Плохая шутка
Если судить о людях по юмору, то автор идиот.
Предполагаете, что возможен сглаз?
Нет, просто читать не приятно.
<сарказм> Это сотрудник полиции мыслей. Людей уже набрали, скоро законопроект о такой полиции введут. </сарказм>
предполагаем, что в глазах людей знакомых с этой болью выглядит как издевка.

Вы так шутите или в самом деле подумали, будто существует болезнь "алиасинг" ("лесенка")? Иногда поражаюсь уровню дискуссии на Хабре. Такое ощущение, что половина комментирующих даже не читают пост.

Про алиасинг я на втором курсе выбрал себе тему для пересказа для английского в 5000 знаков. Сама формулировка поста высмеивает спам письма с поиском денег для неизлечимо больных детей.
Что говорит об отсутствии какого либо участия или ознакомления с этой бедой или наличии знакомых, собирающих деньги для своего ребенка, а то и знакомых потерявших ребенка в моем случае. Если никогда зуб не болел, сочувствовать человеку с зубной болью сложно. Тем более понять что тут может обидеть. Обратите внимание, нет ни одного комментария раскрывающего противоположное мнение кроме вашего. Есть молчаливое несогласие, отсутствие диалога. Так что спасибо. Раз уж спросили может кто и задумается плевать ли ему на то что его слова могут значить что-то большее, чем он ожидает или нет. Возможно это только мои проблемы.

Статья хорошая, только ресайз на стороне клиента давно для себя закрыл. Кому нужен ресайз на клиенте если изображения сейчас на входе минимум от 5 MP закинутых пачкой вешают на долго браузер среднего компа.
> Кому нужен ресайз на клиенте

Очевидно тому, кто делает client-side облачный редактор картинок, например.
Как и очевидно, что это решение не рабочее.
Я игрался этими экспериментальными свойствами интерполяции при ресайзе img и при transform: rotate(). Результат пляшет от версии к версии от браузера к браузеру. Сегодня нормально, завтра мыло и т.п
Вы должны ещё помнить (если ваш ДР в профиле правильный), что во времена IE 3.0 существующий вэб был вообще невозможен. Так что речь скорее не о том, возможно ли это right now. А на ближайшую перспективу. В конце концов технологии развиваются потому что на них есть спрос, а не потому что кто-то придумывает никому ненужную технологию, а потом начинается придумка мест, куда бы её впендюрить.
Как всё хорошо, стабильно и предсказуемо было на старом православном Flash ещё лет 10 назад. Помню известный plupload.com
Хорошо, что вы этот камент написали после того, как пост ушел в глубины ленты )
А кто мешает использовать тот же Flash сейчас? Он стоит практически везде, и в Win10 даже стоит «из коробки». Да и Хром его так и не выпилил, хоть и грозился.

Кстати, действительно интересно, насколько хороший визуально результат ресайза будет во Flash.
UFO just landed and posted this here
В Android 2.3 он точно ещё был, и вроде даже в 4.0. Правда, работал местами криво. Но работал) Особенно если железо смартфона позволяло.

Для мобильных есть Canvas, тут конечно всё ясно. Хотя бы процент айфонов уже не позволяет всерьёз рассматривать Flash для мобайла.

Но можно применить оба решения с динамическим выбором на основе платформы/браузера), тем более если у нас отдельная мобильная версия сервиса, а не единый адаптивный дизайн под всё сразу (хотя и тут решаемо).
UFO just landed and posted this here
Ну да, только в устаревших версиях андроида и устаревшие версии флеша.

Ну уж для ресайза картинок и версия 8-9 сгодится, мне так кажется… А там вообще 11.4

У меня вот флеш удалён и на ПК.

То есть вы и Twitch с YouTube через HTML5 смотрите? Первый как минимум лагать может сильно, а у второго мне просто дизайн контролов не нравится, здоровое всё очень :) Ну это уже на вкус и цвет, да.

Делайте пожалуйста выбор на основе проверки возможностей

Согласен. Но в данном конкретном случае не так важно, мне кажется: если мы хотим не использовать Flash для мобильных, то достаточно проверить, что перед нами мобильное устройство. Разве нет? Можно конечно и массив plugins проверить, но зачем… Медленнее же будет.
UFO just landed and posted this here
Стриминг-платформа для геймеров. Ну и не только для них. Я вот онлайн-уроки иногда там веду, очень удобно, и качество трансляции очень хорошее.
UFO just landed and posted this here
Вангую для таких целей либу на JS, которая будет реализовывать нужный алгоритм ресайза, беря за исходные данные значения пикселей и не будет полагаться на встроенные алгоритмы. Но да, ресурсов это все равно будет кушать немало.
Я так сильно с этим не сталкивался, но что мешает сначала отобразить img в canvas в пропорции 1:1 (на этом этапе потери качества быть не должно), а затем применить нужный нам алгоритм ресайза оперируя только лишь значениями пикселей? по вашей же ссылке сходу пытаются ресайзить. лично я не замечал, чтобы при отображении 1:1 браузер косячил (хотя может быть я просто не работал с большими и качественными изображениями)

UPD: прочитал внимательнее, понял. спасибо.
Хм, а что насчет энергоэфективности? Картинки не только на десктопах смотрят. Я не хотел бы, что бы мой телефон жрал батарейку только потому что горе-дизайнер решил поставит везде high вместо того что бы отресайзить картинки на сервере.
Интересно, что я не так сказал? Мипмапы прекрасно ложатся на GPU, соотвественно, композицию можно делать прямо там, не напрягая лишний раз CPU. Меньше напрягаем CPU -> дольше живет батарейка. Всё логично, как мне кажется.

GPU — тоже тот еще энергожрун. Лучше всего ресайзить картинки во время билда :) Жаль, не всегда возможно.


Но, вообще говоря, пока картинка одна — то в плане энергоэфективности получается экономия на спичках.

Ну дело в том, что GPU на таких задачах жрет меньше энергии, чем CPU. Косвенным подверждением тому явяется например тот факт, что libskia в Андроиде сейчас используется как последняя мера, когда с композицией не справляется ни аппаратный композитор (где он есть), ни GPU. И это при том что libskia по максимуму оптимизированна под различные варианты ARM'ов и x86-тых. Всю работу с графикой пытаются вынести на GPU, и поверьте — это не от хорошей жизни.

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


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

Да тут разрабы Хрома отрезали серпом одно место, что HTTP/2 перестал много где работать, который они же и рожали (через SPDY). А вы тут про картинки ))))
Ну представьте, что разработчики Хрома бы реализовали скругленые уголки аппроксимацией из трех отрезков, потому что так на железо оучше ложится, и сказали бы, что фичу поддерживают. Тут то же самое.


Забавно, что вы вспомнили об этом, т. к. Хром до сих пор не научился правильно рисовать border, отличный от solid. См. https://www.impressivewebs.com/comparison-css-border-style/
Я думаю, что авторы браузера для мобильного устройства вплоне понимают такие аспекты и могут игнорировать волю, как вы выразились, горе-дизайнера. Впрочем я не совсем уверен, что ресайз картинок на сервере, это вообще удел дизайнера, ровно как и в необходимости делать это, когда речь идет об использовании канваса.
Это как запретить делать острые ножи, а то вдруг какой-то горе повар кого-то зарезать решит.
Ресайз может быть нужен не только для отображения картинки с сервера, но и например для отображения миниатюр фоточек перед загрузкой на сервер. Да много чего придумать можно.
Насколько я понял – речь о canvas, а не об обычных картинках в DOM. А канвас в нос на мобильниках вроде и так пока не тычут везде.
Вам стоило бы уточнить в начале статьи, что речь идет о canvas, а то у меня поначалу начала подступать паника, что это происходит в обычных img или css background.

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

Для обычных картинок и background тоже проблема есть в хроме — ужасно мылит, но помогает:
image-rendering: -webkit-optimize-contrast;
Мне кажется не есть хорошо сравнивать якобы болезнь с ребенком, когда в стране итак не мало реально больных детей
Автор, если бы вместо Мани вы использовали Лену, то претензий от моралистов было бы меньше, а ваша статья выглядела бы более «весомо» что ли в глазах знатоков. Но это не критика, а так — мысль вслух )
Есть еще каноничный шакал, как эталон оценки качества сжатия изображения. Он стерпит все.
если бы вместо Мани вы использовали Лену, то претензий от моралистов было бы меньше

Я так не думаю… Вот оригинал из Playpoy.

P.S. Правда модель уже совершеннолетняя и в настоящее время ей уже 65…
Дружище, не передергивай факты. Леной называется кусок оригинала из постера размером 512x512 пикселей, не содержащий никаких непристойностей. Так что моралисты идут лесом.
Виноват, забыл добавить <ирония>… </ирония>
;))

занудство
Леной называется кусок оригинала из постера размером 512x512 пикселей, не содержащий никаких непристойностей.

В том то и дело, что оригинал как раз таки и содержит!
Я же дал ссылку ранее: http://fatcats.ru/uploads/posts/2014-02/1391417934_1972_11_lenna_sjooblom_playboy_centerfold.jpg
Не содежащий по правилам русского языка относится к слову кусок, а не к слову оригинала.

Просто смешно читать претензии этих "моралистов", высосанные из пальца. Картинка абсолютно нормальная. Не стоит ориентироваться на этих людей при написании постов.

так моралисты не к картинке то претензии предъявляют)
куда перечислить деньги бедной Машеньке ))
Не кроется ли здесь проблема в том что браузер — неподходящий инструмент для таких операций? Если редактируете и грузите фотки с мобильных устройств — нужно делать мобильные аппликухи, которые все сделают правильно и как надо. HTML+JS как бэ не для этого был создан.

Потом опять же, надо определиться что важнее — качество картинок или экономия трафика. Если качество картинок важнее то пусть уж сервер ресайзит.
Это очевидно. Если важнее экономия трафика, то пилится приложение. Браузеры трафик слабо экономят. А при зоопарке браузеров ожидать одинакового результата…
Если ресайз неизбежен, то пусть используется алгоритм C3C.
Чем «алиазинг» отличается от «элайзинга»?
1. Искажения, связанные с дискретизацией исходного аналогового сигнала во времени. В результате этого в спектре дискретизированного во времени сигнала появляются дополнительные спектральные составляющие. Следствием этого может быть появление «Эффекта наложения частот» или элайзинга (aliasing) при дискретизации сигнала с достаточно широким частотным спектром.

www.google.ru/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwj6_f3G45rNAhWKlCwKHTwRDdcQFggbMAA&url=http%3A%2F%2Fwww.autex.spb.su%2Fcgi-bin%2Fdownload.cgi%3Fdspa2007_1_18&usg=AFQjCNEpbyYhPrzvFmzWzGU5VoV2sBmECQ&bvm=bv.124088155,d.bGg&cad=rja
Ссылка почему-то подсвечивается не вся.
Это из-за запятой.
С определением ссылок в комментариях вечная проблема, если считать запятые частью ссылки, то в комментарии «Посмотрите на https://example.com, там есть подробная документация с примерами» ссылкой будет и часть после запятой. Можно считать окончанием ссылки запятую, перед которой есть пробел, но не каждый этот пробел поставит т.к. пробела там быть и не должно. Можно считать окончанием ссылки пробел как таковой, но тогда в приведённом мною примере запятая становится частью ссылки, что не корректно. Относительно приемлемым для себя определил вариант, когда концом ссылки считается 0 или более спецсимволов (запятая, точка, двоеточие, восклицательный и вопросительный знаки, любые кавычки, апострофы и скобки), не отделённых буквой или цифрой от пробела справа. Просто потому, что ссылки крайне редко _оканчиваются_ на знак вопроса (и даже в этом случае чаще всего его можно безболезненно убрать), точку или запятую (ибо зачем их использовать не в качестве разделителя). Проблема же ссылок, содержащих пробелы (вставленных без замены на %20) кажется вовсе неразрешимой.
И что. Не ресайзить. А сразу отдавать как надо?
Речь про ресайзинг, например, загружаемых пользователем картинок на клиенте. Для экономии трафика, ресурсов сервера. А также каких-то других произвольных манипуляций, например наложения фильтров, которое при любом другом способе, кроме как «отресайзить на клиенте и на клиенте же наложить фильтр» либо в крайнем случае «отресайзить на клиенте, наложить фильтр на сервере и показать на клиенте что получилось» будет крайне неотзывчиво и недружелюбно.
С каких пор сразу отданная нужная картинка будет хуже чем та, на которую клиент тратит время. И которую качает в полном размере, чтобы потом уменьшить.
Так это вообще не проблема браузера.
Если клиент ее upload — то картинка уезжает на сервер, и даже вовсе не обязана быть сразу показана.
Я не очень понял мотив автора. Первым делом надо было писать в багрепорт хрома, или отправить им вариант более правильного решения на гитхабе. А потом уже пилить статью. А то весь такой крутой «я знаю как правильнее»… А ребятам их хрома сложно что ли подсказать это? Вряд ли они сами будут специально искать эту статью и разбирать её. А на багрепорты скорее всего отреагируют.
Ребята из хрома местами весьма упертые осталопы. Тем более ссылка на багрепорт в посте присутствует.
Ребята из хрома местами весьма упертые осталопы.
А вот это, в таком случае, тема для отдельного поста с примерами и скриншотами.
Вообще я это написал к тому, что с багрепорта надо было начинать. А автор представил информацию в виде «вот всё сейчас плохо. я давно знал как надо сделать чтобы стало лучше, но уже долгое время просто жду что они реализуют это сами. вот терпение вышло — пошёл написал багрепорт»
Я бы с бОльшим удовольствием прочитал статью в стиле «год назад я нашёл проблему ресайза и отправил багрепорт с указаниями и правками как сделать лучше. проблему до сих пор пытаются исправить/не исправили и т.п.»
Почему вы считаете, что все обязаны знать с++, чтобы коммитить фиксы в хром, например? В конце концов, найти баг и нормально его документировать — это тоже большая работа.

Писать отдельный пост с примерами и скриншотами о том, что в каком-то open source проекте разработчики — упёртые осталопы? Вы шутите, наверное?
Вы правы. Писать пост о том что «вот как плохо хром работает с картинками. надо исправлять» — гораздо продуктивнее и интереснее.
Давайте оценим ваш сарказм численно. Данная статья набрала +72. А, например, ваша статья о том «как надо» про Битрикс набрала -9. Думаю, что в этом месте вам нужно задуматься на тему, что:
а) все пидорасы, один вы — д'Артаньян
б) вы читаете и пишите не в то сообщество, где ценят ваши принципы
Спасибо за критику. Буду работать над собой.
Sign up to leave a comment.

Articles