fengyuanchen jQuery cropper插件 - 如何獲得裁剪的畫布

Question

如何使用我自己的按鈕來裁剪圖像？

我試圖執行此

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

但它返回空值。

有沒有辦法得到裁剪的畫布？我怎樣才能把裁剪的畫布數據放入<input type="file">值併發送給PHP？

Answer 1

什麼是$選擇器？如果是這樣的事情：

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

然後你需要調用getCroppedCanvas（）函數來jQuery包裝。因爲如果你寫：

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

它調用cropper 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">

發送帆布圖片到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; 
 
?>