使用Filepicker.io和Aviary工具

Question

我正在使用Aviary-Filepicker工具让用户上传图片，裁剪图片，然后保存。当我在我的javascript中使用下面的代码时，会发生以下情况。

1. 点击上传按钮
2. Filepicker打开
3. 我使用fiepicker选择图像。
4. 鸟舍编辑窗格打开。
5. 我裁剪图片。
6. 我保存了图片。
7. 然后再次打开filepicker（提示我选择另一张图片）。
8. 我选择了图片，然后说我的工作已经保存了。
9. 控制台记录console.log函数。

我不知道为什么filepicker在裁剪并保存之后再次打开。

以下是代码：

$(function(){var a=new Aviary.Feather({apiKey:'zwbGz6e420egYruuRuohTA',apiVersion:2,tools: 'all',initTool: 'crop',cropPresets: [['Square','1:1']],
                                      onSave:function(a){filepicker.pickAndStore({mimetype:"image/*"},{},function(fpfiles){
                                                                                   console.log(JSON.stringify(fpfiles));
                                                                                   });},

    onError:function(a){},appendTo:"editpane"});filepicker.setKey(server_vars.apikey);$(".openbutton").click(function(){filepicker.pick({mimetype:'image/*'},function(b){var c=$('<img id="#editimage"/>');c.attr("src",b.url);$(".editpane").empty().append(c);a.launch({image:c[0],url:b.url});});});});

Answer 1

这是我如何做到的并且有效。我在鸟舍功能中将导出功能添加到onSave。尝试按照Aviary API说明自定义onSave或OnSaveButtonClicked有一些奇怪之处：<​​/ p>

        onSave: function(imageID, newURL) {
        var img = document.getElementById(imageID);
        img.src = newURL;
            filepicker.exportFile(
            newURL,
            {mimetype:'image/png'},
            function(FPFile){
            console.log(FPFile.url);
            });
       },
       onError: function(errorObj) {
           alert(errorObj.message);
       }
   });
   function launchEditor(id, src) {
       featherEditor.launch({
           image: id,
       url: src
       });
      return false;
   }
</script>

Answer 2

在filepicker网站上有一些integration instructions，以防您没有看到它们。