fengyuanchen jQuery裁剪插件 - 如何获取裁剪后的画布

Question

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

我尝试执行以下操作：

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

但是它返回了空值。

有没有办法获得裁剪后的画布？如何将裁剪后的画布数据放入<input type="file">值中并发送到PHP？

- Hitori

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;
?>

- vikram jeet singh

---

我猜第一个片段的第二行应该是：var canvas = $img.cropper('getCroppedCanvas');或者canvas从哪里来？ - morgar

Answer 2

什么是 $selector？如果它像这样：

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

然后你需要调用getCroppedCanvas()函数来包装jQuery。因为如果你写成：

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

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

写出类似于以下内容的东西：

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

它将正常工作。如果您想将画布数据保存为图像并上传到服务器，可以阅读this answer。

- Alexandr Rybak

---

你对jQuery对象的概念似乎有点混淆。$('body').get(0) == $($('body')).get(0); - stt