fengyuanchen jQuery cropper插件 - 如何获得裁剪帆布

时间:2015-05-14 07:40:44

标签: javascript jquery html5 jquery-plugins

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

我试图执行此

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

但它返回空值。

有没有办法获得裁剪的帆布?如何将裁剪的画布数据放入<input type="file">值并将其发送给PHP?

2 个答案:

答案 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