javascript - fengyuanchen jQuery cropper 插件-如何获取裁剪的 Canvas

Question

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

我试着执行这个

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

但它返回空值。

有没有办法得到裁剪后的 Canvas ？以及如何将裁剪后的 Canvas 数据放入 <input type="file">值并将其发送到 PHP？

Answer 1

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