evindor Nov 25 2011 at 07:44

Client-side кропалка на canvas

3 min

3.6K

На одном из проектов было необходимо сделать кропалку для загружаемых юзерами аватаров. Стандартные решения, такие как Jcrop, после выделения области отправляют на сервер координаты, и сам кроп изображения необходимо осуществлять уже на сервере. Тем временем, современные браузеры уже дошли до того состояния, когда подобные действия можно осуществлять сразу на клиенте. Это и подтолкнуло меня к написанию своей кропалки с использованием canvas, которая производила бы все действия на клиенте и отправляла готовое изображение в виде base64-строки на сервер. Помимо ускорения работы и разгрузки сервера, это так же позволит нам сразу сменить аватар пользователя на странице, без подгрузки его с сервера.

Технологии и задача

Кропалка была написана на CoffeeScript — небольшом языке, компилируемом в JavaScript. Оформлена кропалка в виде плагина для jQuery. После загрузки изображения натравливаем на него кропалку — она отрисует поверх изображения канвас с возможностю выделения области. После каждого изменения выделенной области новая картинка записывается в data изображения и к ней можно легко получить доступ извне. Кропалка должна позволять включать превью, устанавливать фиксированное отношение сторон и устанавливать выделение сразу после активации. И, конечно же, кропалка должна работать во всех мажорных браузерах.

Реализация

Область выделения и уголки, за которые область можно растягивать, представлены классом Rect. Ничего волшебного в нем нет — свойства с координатами, методы для определения попадания точки и обновления координат. Класс EvroneCrop отвечает за создание канваса, отрисовку его поверх картинки, навешивание обработчиков и сохранение обрезанной картинки в data.

Для сохранения получившейся картинки создается временный элемент canvas, рассчитываются координаты с учетом оригинального размера изображения, при помощи метода drawImage() выделенная область отрисовывается во временный canvas, и при помощи метода toDataURL() из canvas получаем результирующее изображение, которое в виде строки base64 можно передать на сервер и сохранить.

В нашем случае для сохранения на сервере используется следующий код (Ruby):

encoded_image = params[:image].sub('data:image/png;base64,', '')
avatar_io = FilelessIO.new(Base64.decode64(encoded_image))
avatar_io.original_filename = "avatar.png" # любое значение, обязательный параметр для CarrierWave
Rails.logger.info "IO: #{avatar_io.inspect}"
@user.avatar = avatar_io
@user.save

При создании кропалке можно передать следующие параметры:

$(this).evroneCrop({
    preview: '#preview1',     //селектор элемента img, в котором отображать превью
    size: {w: 150, h: 150},   //размер результирующего изображения
    ratio: 1,                 //отношение сторон области выделения, в данном случае - квадрат
    setSelect: 'center',      //установка выделения по умолчанию
    log: true                 //вывод отладочной информации
});

Все параметры опциональны. Демо.

setSelect может принимать значение center, автоматически рассчитывая центр изображения и размер выделения, или может принимать объект {x:0, y: 0, w: 100, h: 100} и устанавливать выделение в заданную позицию. Если у вас установлен параметр ratio — высоту в объекте для setSelect передавать не нужно.

ratio принимает число, больше нуля, и фиксирует стороны с отношением длин, равным этому числу. Например, можно передать 1 для квадрата или 16/9 для отношения сторон 16 к 9.

Браузерные заморочки

Получившийся инструмент работает во всех мажорных браузерах — Chrome, Firefox > 4, Safari, Opera >11, IE 9. В планах есть написание fallback'а во флэш для IE8. Изначально планировалось использовать гугловый excanvas, но тот, как оказалось, не предоставляет такого необходимого для нашей задачи метода, как toDataURL(); Есть выход с реализацией на флеше, но до него руки пока не дошли.

Кропалка еще сыровата, например, до сих пор не реализована установка минимального и максимального размера, но она лежит на гитхабе, работает, и потихоньку развивается.

Hubs:

HTML