jQuery裁剪插件-如何裁剪画布

fengyuanchen jQuery cropper plugin - how to get cropped canvas

本文关键字：裁剪 何裁剪 插件 jQuery      更新时间：2023-09-26

如何使用我自己的按钮来裁剪图像?

我试图执行这个

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

返回空值

是否有一种方法来获得裁剪画布?我怎么能把裁剪画布数据到<input type="file">值，并将其发送到PHP?

选择器应该是包含图像的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;
?>

什么是$selector?如果是这样:

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

然后你需要调用getCroppedCanvas()函数到jQuery包装器。因为如果你写:

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

它调用cropper getCroppedCanvas函数到DOM元素，而不是jQuery元素。

像这样写:

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

它会很好地工作。如果您想将画布数据保存为服务器上的图像，您可以阅读这个答案

相关文章：