用于Web的Adobe Creative SDK保存已编辑的图像 [英] Adobe Creative SDK for Web saving edited image
问题描述
我正在将Adobe Creative SDK产品应用到我的网站上以供管理使用;管理员可以访问特定图像（在首页滑块上使用），编辑和保存。
麻烦的是Adobe关于如何利用onSave的文档（ ）回调函数很模糊。我不得不去旧网站Aviary寻找答案，但即使在那里它也很模糊。
首先，我使用MySql将图像从服务器上拉下来数据库查询（滑块中至少有2个图像，所以我希望这是数据库驱动而不是静态）。图像存储为文件，并在DB中引用它们。
其次，一旦图像显示在页面上（所有图像都显示在管理页面上使用文本叠加，链接等），管理员可以单击图像并调用Adobe Creative SDK并显示编辑器窗口。一切都很好。
第三，编辑后，管理员可以点击保存，他的编辑暂时保存到Adobe云中（编辑后的图像会替换原始图像）这页纸）。我需要的是图像也保存在我的服务器上OVERRIDING原始图像（我不想进行数据库更新 - 额外的工作量太多）。
<这是Adobe和Aviary的模糊指示无用的地方。
这是我的代码......
（这些是Adobe Creative SDK中的函数）：
var featherEditor = new Aviary.Feather（{
apiKey：'myapikey'，
主题：'dark'，//查看我们新的'light'和'dark'主题！
工具：'all'，
appendTo：''，
onSave：function（imageID，newURL）{
var img = document.getElementById（imageID）;
img.src = newURL;
}，
onError：function （errorObj）{
alert（errorObj.message）;
}
}）;
函数launchEditor（id，src）{
featherEditor.launch（{
image：id，
url：src
}）;
返回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：'对原始图片的一些参考'}）
我假设'/ save'实际上是我用来做这项工作的php脚本......或者也许它是服务器上保存图像的位置......不确定。 'postdata'说它需要一些参考原始图像，但我真的不知道如何得到它。我尝试使用launchEditor（）函数中的url，因为它似乎已传递给featherEditor，但是这不起作用，它只是在我做一个alert（）时返回一个空值。
如果有人可以帮我解决这个问题，我可以轻松地处理服务器端的php，它可以节省费用。但我只是不知道如何获取Adobe保存的新图像以覆盖我服务器上的旧图像。谢谢！
图像编辑器 onSave（）方法
onSave（）只是一个钩子;它是图像保存完成后调用的方法。您放在 onSave（）方法中的内容完全取决于您。
为了说明，您可以1）用新编辑的图像URL替换原始图像元素的源，然后2）关闭编辑器：
onSave：function（imageID，newURL）{
originalImage.src = newURL;
featherEditor.close（）;
}
你甚至可以在那里放一个控制台日志，但那不会为用户做了很多。
同样， onSave（）只是一个在保存后使用的钩子完成，其内容完全取决于您。
发布到您的服务器
您展示的代码您的问题只是在图像编辑器的 onSave（）方法中使用jQuery将数据发布到服务器的示例。没有要求你这样做;你甚至不必使用jQuery。
为清楚起见，这里再看一下这个例子：
$ .post（'/ save'，{url：newURL，postdata：'对原始图片的一些参考'}）
端点
上面的例子使用 jQuery post（）方法点击 / save 您服务器上的端点。这个端点可以是你想要的任何东西。如果你的服务器上有一个名为 / upload-image 的端点，你可以改用它。
在你的case，在此端点将是处理图像文件保存和数据库更新的PHP脚本。
发布数据
post（）的第二个参数是一个包含您要传递的数据的对象。在这个例子中，我们传递了：
- 编辑后图像的
newURL所以你的服务器可以用它做一些事情（参见下面的重要说明） - 对原始图像的引用（任意命名
postdata这里）所以你的服务器可以知道编辑了什么图像
你可以在这个对象中放置任何你想要的东西。这取决于您的服务器脚本需要什么。但至少，我认为它需要 newURL ，并且可能在某种程度上引用数据库中的原始图像。
重要说明：，如用于Web图像编辑器指南的Creative SDK ，您在 onSave（） newURL c>方法是临时URL 。它将在72小时后到期。这意味着您的服务器脚本需要将图像本身保存到您的服务器。如果您只将URL存储在数据库中，您的图像将在72小时内消失。
I am implementing the Adobe Creative SDK product onto my site for administrative use; administrators are able to access specific images (used on the frontpage slider), edit, and save.
The trouble is that Adobe's documentation on how to take advantage of the onSave() callback function is very vague. I had to go to the old site, Aviary, to find answers, but even there it's quite vague.
First, I am pulling the images off the server using a MySql DB query (there's at least 2 images in the slider so I wanted this to be database-driven rather than static). The images are stored as files with reference to them in the DB.
Second, once the images are displayed on the page (all of them are displayed on the administrative page along with text overlays, links, etc.), the administrator can click on the image and the Adobe Creative SDK is called and the editor window shows. All good.
Third, after editing, the admin can click "Save" and his edits are saved to the Adobe cloud temporarily (and the edited image replaces the original image on the page). What I need is for the image to ALSO save on my server OVERRIDING the original image (I don't want to have to do a DB update - too much extra work).
This is where the vague instructions at Adobe and Aviary are not helpful.
Here's my code...
(These is the functions from 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;
}
Essentially each image that is loaded includes in the <img> tag an onclick event which looks like:
<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>
This calls the launchEditor function and shows the editor. When Save is clicked, among a few other things, the onSave() callback is fired and it is in that callback function that I can save the image locally.
BUT Adobe only offers the following examples to accomplish this and they make little sense to me:
First, it appears that this needs to be added to the onSave() function:
$.post('/save', {url: newURL, postdata: 'some reference to the original image'})
I'm assuming that the '/save' would actually be the php script I use to do the work...or maybe it's the location on the server to save the image...not sure. The 'postdata' says it needs "some reference to the original image", but I don't really know how to get that. I tried using "url" from the launchEditor() function because it appears that it was passed to the featherEditor, but that didn't work, it just returned a null value when I did an alert().
If someone could help me figure this out, I can easily take care of the server side php which does the saving. But I just don't know how to get the new image that Adobe has saved to override the old image on my server. Thanks!
The Image Editor onSave() method
onSave() is just a hook; it is the method called after the image save is complete. What you put inside of the onSave() method is entirely up to you.
Just to illustrate, you could 1) replace the original image element's source with the new edited image URL, then 2) close the editor:
onSave: function(imageID, newURL) {
originalImage.src = newURL;
featherEditor.close();
}
You could even just put a console log in there, but that wouldn't do much for the user.
Again, onSave() is just a hook that is used after the save is complete, and its content is completely up to you.
Posting to your server
The code you showed in your question is just an example of how you might post the data to your server using jQuery within the Image Editor's onSave() method. There is no requirement that you do it this way; you don't even have to use jQuery.
For clarity, here's a look at that example again:
$.post('/save', {url: newURL, postdata: 'some reference to the original image'})
The endpoint
The example above uses the jQuery post() method to hit a /save endpoint on your server. This endpoint could be anything you want it to be. If you have an endpoint on your server called /upload-image, you could use that instead.
In your case, at this endpoint would be the PHP script that handles the image file save and database update.
The post data
The second argument to post() is an object with the data that you want to pass. In this example, we're passing:
- the
newURLof the edited image so your server can do something with it (see Important note below) - a reference to the original image (arbitrarily named
postdatahere) so your server can know what image was edited
You can put anything you want in this object. It depends on what your server script needs. But at the bare minimum, I would think it would need the newURL and likely some way to reference the original image in your database.
Important note: as noted in the Creative SDK for web Image Editor guide, the newURL that you receive in the onSave() method is a temporary URL. It expires in 72 hours. That means that your server script needs to save the image itself to your server. If you only store the URL in your database, your images will start disappearing in 72 hours.
这篇关于用于Web的Adobe Creative SDK保存已编辑的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
