fengyuanchen jQuery обрезной плагин - как получить обрезанный холст

Question

Как получить обрезку изображения с помощью моей собственной кнопки?

Я попытался выполнить эту

var canvas = $selector.cropper('getCroppedCanvas') 

но это возвращение нулевого значения.

Есть ли способ получить обрезанный холст? И как я могу поместить обрезанные данные холста в значение <input type="file"> и отправить его на PHP?

Answer 1

Что такое $ selector? Если это что-то вроде этого:

var $selector = $(".selector"); 

Затем вам нужно позвонить getCroppedCanvas() функция JQuery обертке. Потому что, если вы пишете:

var canvas = $selector.cropper('getCroppedCanvas'); 

Он вызывает Кроппера функцию getCroppedCanvas к DOM элементу, а не к JQuery элемента.

Написать что-то вроде этого:

var $selector = $(".selector"); 
var canvas = $($selector).cropper('getCroppedCanvas'); 

И это будет прекрасно работать. Если вы хотите сохранить данные холст как изображение на сервере, вы можете прочитать this answer

Answer 2

Вашего селектор должна быть HTML контейнером, который содержит изображение: Javascript и HTML должен быть как, как указано ниже:

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

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

<img src="" id="uploader-preview">

Отправить Canvas изображение в PHP:

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

 
Here's PHP Script 
 
photo_upload.php 
 

 
<?php 
 
\t 
 
\t $data = $_POST['photo']; 
 
\t list($type, $data) = explode(';', $data); 
 
\t list(, $data)  = explode(',', $data); 
 
\t $data = base64_decode($data); 
 

 
\t mkdir($_SERVER['DOCUMENT_ROOT'] . "/photos"); 
 

 
\t file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/photos/".time().'.png', $data); 
 
\t die; 
 
?>