我正在我的网站上实现 Adobe Creative SDK 产品以供管理使用;管理员能够访问特定图像(在首页 slider 上使用)、编辑和保存。
问题在于 Adobe 关于如何利用 onSave() 回调函数的文档非常模糊。我不得不去旧网站 Aviary 寻找答案,但即使在那里也很模糊。
首先,我使用 MySql 数据库查询从服务器中提取图像( slider 中至少有 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 保存的新图像以覆盖我服务器上的旧图像。谢谢!
最佳答案
图像编辑器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()
的第二个参数是一个包含您要传递的数据的对象。在这个例子中,我们传递:
- 已编辑图像的
newURL
,以便您的服务器可以对其执行某些操作(请参阅下面的重要说明) - 对原始图像的引用(此处任意命名为
postdata
),以便您的服务器可以知道编辑了哪些图像
你可以在这个对象中放入任何你想要的东西。这取决于您的服务器脚本需要什么。但至少,我认为它需要 newURL
并且可能需要某种方式来引用数据库中的原始图像。
重要说明:如 Creative SDK for web Image Editor guide 中所述,您在 onSave()
方法中收到的 newURL
是一个临时 URL。它会在 72 小时后过期。这意味着您的服务器脚本需要将图像本身保存到您的服务器。如果您只将 URL 存储在数据库中,您的图像将在 72 小时内开始消失。
关于javascript - Adobe Creative SDK for Web 保存编辑后的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33922117/