Html5 canvas, выбор библиотеки?

Question

[achuraev]

Задача при работе с канвасом простая, загрузить картинку, кропнуть ее пропорционально по размерам канваса и поставить так же как и бекграунд-сайз: кавер. Конечно есть проблема - аффинные преобразования уничтожают картинку. Решение исходя из гугла одно - делать кроп картинки до вставки ее в канвас. Вопрос: может быть кто-то сталкивался с такой проблемой и есть решения реализованные в одной библиотеки?
В идеале от библиотеки нужно:
1) обход трабла с нереальным ухудшением качества (это главное)
2) драг энд дроп картинки
3) добавление текста
4) бекграунд-сайз: кавер

Answer 1

[dom1n1k]

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

Comments

[achuraev]

Т.е. я беру размер канваса и размер картинки. Делю размер картинки на размер канваса (в зависимости от формата картинки либо по высоте либо по ширине) и округляю в большую сторону - это и будет кол-во преобразований. Затем выполняю это кол-во раз уменьшение картинки в двое. Все правильно? В идеале картинка должна быть по размерам канваса исходного.

Еще такой вопрос: есть ли шанс делать обработку с сохранением исходного размера картинки (но канвас при этом меньше картинки)?

[dom1n1k]

На примере.
Делим больший размер на меньший. Получилось предположим 6.85.
Делим на ближайшую меньшую степень двойки: 6.85/4=1.7125 - это и будет коэффициент для первого шага.
Далее 2 шага, где будет масштабирование ровно в 2 раза.

Вопрос как-то не понял.

[achuraev]

По поводу уменьшения понял, спасибо! PS - в данный момент рассматриваю вариант прогнать картинку через мудуль nginx (https://developers.google.com/speed/pagespeed/modu... и после уже вставить уменьшенную картинку в канвас

Answer 2

[Dark Hole]

1) Использовать полукоординаты (с 0 = 0.5)
2) Внутрь или по canvas?
3) Текста к чему? Canvas это по умолчанию может(если я все правильно понял)
4) Решается простым кодом, библотека не нужна(код завтра скину)

Comments

[achuraev]

По поводу текста - да, просто видел в одной библиотеки как текст добавляется сразу с функцией драг энд дропа и ресайза (как все привыкли, за угол тянуть)

Answer 3

[GreatRash]

1) как верно заметил dom1n1k надо резайзить постепенно, вот готовый код
2) не понятно
3) не понятно
4) просто центрируем картинку и её размеры задаём по наибольшей стороне

Именно библиотеку такую вряд ли найдёте.

Comments

[achuraev]

Спасибо!

Answer 4

[Константин Китманов]

Как вариант, можно на клиенте только делать превью, на сервер отправлять оригинальную картинку, координаты кропа, текст и его координаты и генерить картинку там ImageMagic'ом или еще чем.

Comments

[achuraev]

На прозапас оставлю, если с канвасом совсем заморочки будут. Еще как вариант делать html2canvas, но это тоже оставлю на совсем безнадежный случай