Html5 canvas, library choice?

Question

JavaScript

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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