Как отправить на PHP обрезаное фото с помощью JS плагина «Cropper»?

Question

[supportitc]

Есть форма вывода изображения:

<div style="height: 400px;">
<img id="image" src="' .$uploadfile. '" id="avatar">
</div>

<button id="gocrop">Сохранить фото</button>

И скрипт вызова плагина:

var $image = $('#image');

$image.cropper({
  aspectRatio: 1800 / 1800,
  crop: function(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  }
});

// Get the Cropper.js instance after initialized
var cropper = $image.data('cropper');

По итогу получается:


И теперь неочень понятно как отправить обрезаное фото в квадрате на PHP пост запросом .

Comments

[supportitc]

Плагин есть тут: https://fengyuanchen.github.io/cropper/

Answer 1

[FeNUMe]

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

Comments

[supportitc]

Что-то вроде:

$img = $('#uploader-preview');


$img.cropper('getCroppedCanvas');
var canvaURL = canvas.toDataURL('image/jpeg'); // it returns the



var photo = canvas.toDataURL('image/jpeg');
$.ajax({
  method: 'POST',
  url: '../photo_upload.php',
  data: {
    photo: photo
  }
});

Пока не работает)

[FeNUMe]

а с чего бы ему работать? вы же используете .toDataURL('image/jpeg') не на результирующем канвасе из $img.cropper('getCroppedCanvas');
Кстати внимательно прочитайте заметки по этому методу .getCroppedCanvas(), иначе возникнут еще вопросы с прозрачностью.