Adobe Creative SDK for Web 保存编辑过的图片

Question

我正在将Adobe Creative SDK产品应用到我的网站上，用于管理。管理员可以访问特定的图片（用于主页幻灯片），进行编辑和保存。

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

首先，我通过MySql DB查询从服务器取出图像（至少有2个图像在幻灯片上，所以我希望这是数据库驱动而不是静态的）。这些图像作为文件存储，并在数据库中引用它们。

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

第三，编辑完成后，管理员可以点击“保存”，他的编辑将暂时保存到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'})

我假设 '/save' 实际上是我用来处理工作的 php 脚本，或者它是保存图像的服务器位置，但我不确定。'postdata' 表示它需要 "对原始图像的某些引用"，但我不知道如何获得它。我尝试使用 launchEditor() 函数中的 "url"，因为它似乎被传递到了 featherEditor，但这并没有起作用，当我执行 alert() 时，它只返回了一个空值。

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

- Daniel Carlson

Answer 1

图片编辑器的onSave()方法

onSave()只是一个钩子，它是在图片保存完成后调用的方法。你可以将任何你想要执行的内容放在onSave()方法中。

举个例子，你可以 1) 用新编辑的图片URL替换原始图片元素的源代码，然后 2) 关闭编辑器：

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

您甚至可以在其中放置一个控制台日志，但这对用户并没有太大作用。

再次强调，`onSave()`只是一个钩子，在保存完成后使用，其内容完全由您决定。

向您的服务器发送数据

您在问题中展示的代码只是一个示例，展示了如何在Image Editor的`onSave()`方法中使用jQuery将数据提交到服务器。并非必须按照此方式操作；您甚至不必使用jQuery。

为了更清晰地说明，我们再次查看该示例：

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

端点

上面的示例使用jQuery post()方法来访问服务器上的/save端点。这个端点可以是你想要的任何内容。如果你在服务器上有一个名为/upload-image的端点，你也可以使用它。

在你的情况下，这个端点将是处理图像文件保存和数据库更新的PHP脚本所在的位置。

发布数据

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

1. 编辑后图像的newURL，以便你的服务器可以对其进行某些操作（请参阅下面的重要提示）
2. 原始图像的引用（此处随意命名为postdata），以便你的服务器知道哪个图像被编辑了

你可以在这个对象中放置任何你想要的东西。这取决于你的服务器脚本需要什么。但最基本的是，我认为它需要newURL，很可能还需要一些方式来引用你数据库中的原始图像。

重要提示：如Creative SDK for web Image Editor guide中所述，你在onSave()方法中收到的newURL是一个临时URL。它将在72小时后过期。这意味着你的服务器脚本需要将图像本身保存到你的服务器上。如果你只在数据库中存储URL，则你的图像将在72小时后开始消失。

- Ash Ryan Arnwine

---

如何将图像发送到我的服务器而不是Adobe服务器并在那里保存？ - Rohit Khatri