如何使用FineUploader Core和JCrop来裁剪和上传图像

Question

我知道这个问题 - Fineuploader - add jqCrop。 然而，我的挑战是我不想使用将jCrop添加为监听器的通用文件输入。我是FineUploader的新手。一些专家确认这是否是最合适的步骤。

form: {
   element:document.getElementById('fileinput_inline')
}

$('#image_input img').Jcrop({
    bgColor: 'black',
    bgOpacity: .6,
    setSelect: [0, 0, 100, 100],
    aspectRatio: 1,
    onSelect: imgSelect,
    onChange: imgSelect
}); 

1. 使用FineUploader Core form.element选项将我的文件输入绑定到FineUpload

2. 使用FineUploader验证选项验证大小，文件类型等

3. 在onSubmitted事件中，检索文件ID并使用drawThumbnail方法在图像html元素中插入预览（<img id='image_input'/>）

4. 介绍jCrop。

5. 将裁剪的Blob提交给Fine Uploade uploader.addBlobs（{blob：croppedImageAsBlob，name：＆＃34; my cropped image.png＆＃34;}）;

6. 触发上传到服务器

Answer 1

您概述的步骤看起来合适，但绑定到jcrop的选择器看起来不正确。

对于此元素：<img id='image_input'/>，您的选择器字符串应为＆＃39;＃image_input＆＃39;。