Fineuploader - 添加jqCrop [英] Fineuploader - add jqCrop

问题描述

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

I already implemented drag&drop image sorting with Fineuploader (using jQuery Sortable for this), and now I would like to add jqCrop support (http://adriengibrat.github.io/jQuery-crop/). Ideally I would like to let the user crop the image before upload.

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

What would be the best way to implent this?

推荐答案

首先，我没有理由使用jqCrop。它似乎没有做任何 JCrop 尚未做的事情，jCrop更多广泛使用（并可能因此测试）。

First off, I so no reason to use jqCrop. It doesn't appear to do anything that JCrop doesn't already do, and jCrop is much more widely used (and probably tested as a result).

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

With that in mind, here are the steps you must follow:

你因为JCrop实际上似乎没有修改图像，所以需要自己这样做的后半部分。但是，有一段代码，说明了如何做到这一点。代码遵循的步骤如下：

You'll need to so the latter part of this yourself since JCrop doesn't actually seem to modify the image. However, there's a snippet of code that shows how this can be done. The steps that the code follow are:

1. 从JCrop抓取作物的尺寸


2. 绘制将图像移到< canvas> 上，忽略裁剪尺寸之外的所有内容。


3. 抓取<$ c $的base64表示c>< canvas> 通过数据URI。您将需要此数据URI用于下一步。

1. Grab dimensions of the crop from JCrop
2. Draw the image onto a <canvas>, ignoring everything outside of the cropped dimensions.
3. Grab a base64 representation of the <canvas> via a data URI. You'll need this data URI for the next step.

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

Fine Uploader已经为它做了这个图像缩放功能。在将来的版本中通过API方法公开这一点似乎是合理的（甚至可能作为当前或下一个发布周期的一部分），但是，现在，您可以使用 Fine Uploader的内部私有功能，在缩放模块的原型上执行此操作。

Step 2: Turn the cropped version of the image into a Blob

Fine Uploader already does this for it's image scaling feature internally. It seems reasonable to expose this via an API method in a future release (maybe even as part of the current or next release cycle), but, for now, you can just make use of Fine Uploader's internal "private" function that does this on the prototype of the scaling module.

注意 - 此代码访问私有函数。它可能会随时更改，重命名或删除。使用它时请记住这一点。我将确保更新这个答案一旦我们通过API方法使这一切变得更容易因此不再需要直接访问此私有方法：

Note - This code accesses a private function. It may change, be renamed, or be removed at any time. Please keep this in mind when you use this. I will be sure to update this answer once we make this all easier via an API method so direct access to this private method isn't necessary anymore:

var croppedImageAsBlob = qq.Scaler.prototype._dataUriToBlob（data_uri_from_step1_above）;

步骤2中的呼叫将返回 Blob 。然后，您可以通过 Blob 传递给Fine Uploader rel =nofollow> addBlobs API方法，如下所示：

The call in step 2 will return a Blob. You can then pass this Blob to Fine Uploader via the addBlobs API method like this:

uploader.addBlobs（{blob：croppedImageAsBlob，name：my cropped image.png}）;

这篇关于Fineuploader - 添加jqCrop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！