3

我正在我的网站上实施 Adob​​e Creative SDK 产品以供管理使用；管理员能够访问特定图像（在首页滑块上使用）、编辑和保存。

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

首先，我使用 MySql DB 查询从服务器上提取图像（滑块中至少有 2 个图像，所以我希望它是数据库驱动的而不是静态的）。图像以文件的形式存储在数据库中。

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

第三，编辑完成后，管理员可以点击“保存”，他的编辑内容会临时保存到Adobe云中（编辑后的图像会替换页面上的原始图像）。我需要的是图像也保存在我的服务器上，覆盖原始图像（我不想进行数据库更新 - 太多额外的工作）。

这就是 Adob​​e 和 Aviary 的模糊说明没有帮助的地方。

这是我的代码...

（这些是 Adob​​e 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 函数并显示编辑器。单击 Save 时，除其他几件事外，还会触发 onSave() 回调，并且在该回调函数中，我可以在本地保存图像。

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

首先，这似乎需要添加到 onSave() 函数中：

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

我假设'/save'实际上是我用来完成工作的php脚本......或者它可能是服务器上保存图像的位置......不确定。'postdata' 说它需要“对原始图像的一些参考”，但我真的不知道如何得到它。我尝试使用launchEditor() 函数中的“url”，因为它似乎已传递给featherEditor，但这不起作用，当我执行alert() 时它只是返回了一个空值。

如果有人可以帮我解决这个问题，我可以轻松地处理服务器端的 php 来进行保存。但我只是不知道如何获取 Adob​​e 保存的新图像以覆盖我服务器上的旧图像。谢谢！

4

1 回答 1

4

图像编辑器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'})

端点

上面的示例使用jQuerypost()方法来/save访问服务器上的端点。这个端点可以是你想要的任何东西。如果您的服务器上有一个名为 的端点/upload-image，则可以改用它。

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

发布数据

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

  1. 编辑后的newURL图像，以便您的服务器可以对其进行处理（请参阅下面的重要说明）
  2. 对原始图像的引用（postdata在此处任意命名），以便您的服务器可以知道编辑了什么图像

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

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

于 2016-01-07T16:19:11.883 回答