如何使用我自己的按钮裁剪图像?
我试图执行此
var canvas = $selector.cropper('getCroppedCanvas')
但它返回空值。
有没有办法获得裁剪的帆布?如何将裁剪的画布数据放入<input type="file">
值并将其发送给PHP?
答案 0 :(得分:5)
您的选择器应该是包含图像的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
$data = $_POST['photo'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
mkdir($_SERVER['DOCUMENT_ROOT'] . "/photos");
file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/photos/".time().'.png', $data);
die;
?>
答案 1 :(得分:0)
什么是$ selector?如果是这样的话:
var $selector = $(".selector");
然后你需要调用getCroppedCanvas()函数来jQuery包装器。因为如果你写:
var canvas = $selector.cropper('getCroppedCanvas');
它将cropper getCroppedCanvas函数调用到DOM元素,而不是jQuery元素。
写下这样的东西:
var $selector = $(".selector");
var canvas = $($selector).cropper('getCroppedCanvas');
它会正常工作。如果要将画布数据保存为服务器上的图像,可以阅读this answer