Fineuploader - 添加jqCrop

Question

我已经使用Fineuploader实现拖放图像排序（使用jQuery Sortable），现在我想添加jqCrop支持（http://adriengibrat.github.io/jQuery-crop/）。理想情况下，我想让用户在上传之前裁剪图像。

实施此项目的最佳方式是什么？

Answer 1

首先，我没有理由使用jqCrop。它似乎没有执行JCrop尚未执行的任何操作，并且jCrop被广泛使用（并且可能作为结果进行了测试）。

考虑到这一点，以下是您必须遵循的步骤：

步骤1：使用JCrop收集新图像的尺寸，然后将图像的所需部分绘制到<canvas>。

你需要自己这么做，因为JCrop似乎并没有真正修改图像。但是，有a snippet of code that shows how this can be done。代码遵循的步骤是：

1. 从JCrop
抓取作物的尺寸
2. 将图像绘制到<canvas>上，忽略裁剪尺寸之外的所有内容。
3. 通过数据URI获取<canvas>的base64表示。您将需要此数据URI用于下一步。

第2步：将图像的裁剪版本转换为Blob

Fine Uploader已在内部为image scaling feature执行此操作。在将来的版本中通过API方法公开这一点似乎是合理的（甚至可能作为当前或下一个发布周期的一部分），但是，现在，您可以使用Fine Uploader's internal "private" function that does this on the prototype of the scaling module。

注意 - 此代码访问私有函数。它可能会随时更改，重命名或删除。使用它时请记住这一点。我将确保更新此答案once we make this all easier via an API method，因此不再需要直接访问此私有方法：

var croppedImageAsBlob = qq.Scaler.prototype._dataUriToBlob(data_uri_from_step1_above);

第3步：将裁剪的Blob提交给Fine Uploader

第2步中的通话将返回Blob。然后，您可以通过addBlobs API method将此Blob传递给Fine Uploader，如下所示：

uploader.addBlobs({blob: croppedImageAsBlob, name: "my cropped image.png"});

Answer 2

<强>剪辑

似乎jqCrop并没有真正裁剪任何东西。如果您想让用户在>上传之前裁剪图片，则必须使用javascript编辑图片，这可以通过Canvas.clip（）

完成

此库效果很好：http://blueimp.github.io/JavaScript-Load-Image/

<强>上传

图像编辑后，您可以从画布获取Base64编码的图像数据，然后将其上传到服务器：

使用Javascript：

canvas.toDataURL();

PHP：

$encodedData = str_replace(' ','+',$encodedData);
$decocedData = base64_decode($encodedData);