Question

我正在将Adobe Creative SDK产品应用到我的网站上以供管理使用;管理员可以访问特定图像（在首页滑块上使用），编辑和保存。

麻烦的是Adobe关于如何利用onSave（）回调函数的文档非常模糊。我不得不去旧网站Aviary寻找答案，但即使在那里它也很模糊。

首先，我使用MySql DB查询将图像从服务器上拉出来（滑块中至少有2个图像，所以我希望这是数据库驱动而不是静态）。图像存储为文件，并在DB中引用它们。

其次，一旦图像显示在页面上（所有图像都显示在管理页面上以及文本覆盖，链接等），管理员可以单击图像并调用Adobe Creative SDK并且编辑窗口显示。一切都好。

第三，编辑完成后，管理员可以点击＆＃34;保存＆＃34;并且他的编辑暂时保存到Adobe云中（并且编辑的图像将替换页面上的原始图像）。我需要的是图像也保存在我的服务器上覆盖原始图像（我不想进行数据库更新 - 额外的工作量太多了。）

这是Adobe和Aviary模糊指示无用的地方。

这是我的代码......

（这些是Adobe Creative SDK中的功能）：

var featherEditor = new Aviary.Feather({
     apiKey: 'myapikey',
     theme: 'dark', // Check out our new 'light' and 'dark' themes!
     tools: 'all',
     appendTo: '',
     onSave: function(imageID, newURL) {
          var img = document.getElementById(imageID);
          img.src = newURL;
     },
     onError: function(errorObj) {
          alert(errorObj.message);
     }
});
function launchEditor(id, src) {
     featherEditor.launch({
          image: id,
          url: src
     });
     return false;
}

基本上，每个加载的图像都在<img>标记中包含一个onclick事件，如下所示：

<a href="#" onclick="return launchEditor('editableimage<?php echo $srow->id ?>', 'http://www.3yearlectionary.org/assets/slider/<?php echo $srow->sld_image ?>');"><img id="editableimage<?php echo $srow->id ?>" src="assets/slider/<?php echo $srow->sld_image ?>" /></a>

这将调用launchEditor函数并显示编辑器。单击“保存”时，在其他一些事情中，会触发onSave（）回调，并且在该回调函数中，我可以在本地保存图像。

但Adobe仅提供以下示例来完成此操作，它们对我来说毫无意义：

首先，似乎需要将其添加到onSave（）函数中：

$.post('/save', {url: newURL, postdata: 'some reference to the original image'})

我假设＆＃39; / save＆＃39;实际上是我用来做这项工作的PHP脚本......或者它可能是服务器上保存图像的位置......不确定。＆＃39; postdata＆＃39;说它需要＆＃34;一些参考原始图像＆＃34;，但我真的不知道如何得到它。我尝试使用＆＃34; url＆＃34;来自launchEditor（）函数，因为它似乎已传递给featherEditor，但是它没有工作，它只是在我做一个alert（）时返回一个空值。

如果有人可以帮我解决这个问题，我可以轻松地处理服务器端的php，它可以节省费用。但我不知道如何获取Adobe保存的新图像以覆盖我服务器上的旧图像。谢谢！

Answer 1

图像编辑器`onSave()`方法

onSave()只是一个钩子;它是图像保存完成后调用的方法。你在onSave()方法中放置的内容完全取决于你。

为了说明，您可以1）用新编辑的图像URL替换原始图像元素的源，然后2）关闭编辑器：

onSave: function(imageID, newURL) {
    originalImage.src = newURL;
    featherEditor.close();
}

你甚至可以在其中放置一个控制台日志，但这对用户来说没什么用。

同样，onSave()只是保存完成后使用的一个钩子，其内容完全取决于你。

发布到您的服务器

您在问题中显示的代码只是在图像编辑器的onSave()方法中使用jQuery将数据发布到服务器的示例。没有要求你这样做;你甚至不必使用jQuery。

为清楚起见，这里再次看一下这个例子：

$.post('/save', {url: newURL, postdata: 'some reference to the original image'})

端点

上面的示例使用jQuery post() method命中服务器上的/save端点。这个端点可以是你想要的任何东西。如果您的服务器上有一个名为/upload-image的端点，则可以使用该端点。

在您的情况下，此端点将是处理图像文件保存和数据库更新的PHP脚本。

发布数据

post()的第二个参数是一个包含您想要传递的数据的对象。在这个例子中，我们传递了：

已修改图片的newURL，以便您的服务器可以对其执行操作（请参阅下面的重要说明）
对原始图片的引用（此处任意命名为postdata），以便您的服务器可以知道编辑的图像

您可以在此对象中放置任何内容。这取决于您的服务器脚本需要什么。但至少，我认为它需要newURL，并且可能需要某种方式来引用数据库中的原始图像。

重要说明，如Creative SDK for web Image Editor guide中所述，您在newURL方法中收到的onSave()是临时网址。它将在72小时后到期。这意味着您的服务器脚本需要将图像本身保存到您的服务器。如果您只将URL存储在数据库中，您的图像将在72小时内消失。

用于Web的Adobe Creative SDK保存已编辑的图像

1 个答案:

图像编辑器`onSave()`方法

发布到您的服务器

端点

发布数据

用于Web的Adobe Creative SDK保存已编辑的图像

1 个答案:

图像编辑器onSave()方法

发布到您的服务器

端点

发布数据

图像编辑器`onSave()`方法