javascript - Adobe Creative SDK for Web 保存编辑后的图像

Question

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

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

首先，我使用 MySql 数据库查询从服务器中提取图像( slider 中至少有 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 函数并显示编辑器。单击“保存”时，会触发 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 保存的新图像以覆盖我服务器上的旧图像。谢谢!

Answer 1

图像编辑器onSave()方法

onSave() 只是一个钩子(Hook)；这是图像保存完成后调用的方法。您在 onSave() 方法中放入什么完全取决于您。

只是为了说明，您可以 1) 将原始图像元素的源替换为新编辑的图像 URL，然后 2) 关闭编辑器:

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

您甚至可以只在其中放置一个控制台日志，但这对用户来说意义不大。

同样，onSave() 只是保存完成后使用的一个钩子(Hook)，其内容完全由您决定。

发布到您的服务器

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

为清楚起见，再次查看该示例:

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

端点

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

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

帖子数据

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

1. 已编辑图像的 newURL，以便您的服务器可以对其执行某些操作(请参阅下面的重要说明)
2. 对原始图像的引用(此处任意命名为 postdata)，以便您的服务器可以知道编辑了哪些图像

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

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