Resize & crop на jQuery

#jquery #javascript #вконтакте #vkontakte_api

Требуется реализовать рейсайзер на jQuery. 
Перебрал все, что только можно. К сожалению, сам не в состояние подобное написать.
 Редактировал только то, что имеется.
Я знаю, что таких готовых решений куча, но они меня не устраивают потому что максимальная
ширина и высота - статичны. Мне нужны динамичные макс. ширину и макс высоту. (например,
как в соц. сети ВК).
допустим максимальная высота = текущая ширина X 2. и т.д
Пытался сам переписать, выходило не то или почти то. но довести до конца не получается.
5-ый день пытаюсь. 
Кто-нибудь пытался сделать так же? Можете ли что-то посоветовать? Прошу адекватный
ответ, обращаюсь здесь, потому что все перебрал.     

Ответы

Ответ 1

Я использую этот плагин - Jcrop. В нем можно задавать соотношение сторон.

Jcrop is the quick and easy way to add image cropping functionality to your web application.
It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform
DHTML cropping engine that is faithful to familiar desktop graphics applications.


Ответ 2

разбираемся и качаем cropper.js 
После установки/настройки кроппера, необходимо получить картинку и создать экземпляр
кроппера с этой картинкой

var image = document.getElementById('image');
var cropper = new Cropper(image)


2.1 Так же, вторым параметром, можно передать json со всем ворохом функций, настроек
и событий, как показано в примере:

new Cropper(image, {
  ready: function () {
    // this.cropper[method](argument1, , argument2, ..., argumentN);
    this.cropper.move(1, -1);

    // Allows chain composition
    this.cropper.move(1, -1).rotate(45).scale(1, -1);
  }
});



Необходимо подписаться на событие crop или cropend в зависимости от того в какой
момент Вам нужно будет делать обрезку изображения

image.addEventListener('crop', cropImage);
function cropImage(event) {...} 

Тут несколько вариантов развития событий. Первый, вы в event получаете параметры
нового изображения и отправляете аяксом, на бэк. И на бэке делаете обработку изображения
и отдаете обратно аяксом.
Второй, вы получаете параметры новой картинки, и, с помощью js, создаете новую картинку.
cropImage будет выглядеть примерно так:

 cropImage(event) {
   cropBoxData = event.getCropBoxData();
   canvasData = event.getCanvasData();

   options.ready = function () {
    cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);

      sendAjaxFromCanvas();
   };


}

Потом необходимо получить картинку из канваса и отправлять аяксом на бэк:

sendAjaxFromCanvas() {
  cropper.getCroppedCanvas().toBlob(function (blob) {
  var formData = new FormData();

  formData.append('croppedImage', blob);
   $.ajax('/path/to/upload', {
     method: "POST",
     data: formData,
     processData: false,
     contentType: false,
     success: function () {
      console.log('Upload success');
     },
     error: function () {
       console.log('Upload error');
     }
   });
 });
}