草庐IT

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

coder 2024-05-02 原文

我正在我的网站上实现 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 保存的新图像以覆盖我服务器上的旧图像。谢谢!

最佳答案

图像编辑器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 小时内开始消失。

关于javascript - Adobe Creative SDK for Web 保存编辑后的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33922117/

javascriptCreativecodeonSave39phpimageadobeadobecreativesdk

有关javascript - Adobe Creative SDK for Web 保存编辑后的图像的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  3. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  4. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  5. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  6. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

  7. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  8. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

  9. ruby-on-rails - Rails 3.2 防止使用错误保存对象 - 2

    我有一个ActiveRecord对象，我想在不对模型进行永久验证的情况下阻止它被保存。您过去可以使用errors.add执行类似的操作，但它看起来不再有效了。user=User.lastuser.errors.add:name,"namedoesn'trhymewithorange"user.valid?#=>trueuser.save#=>true或user=User.lastuser.errors.add:base,"myuniqueerror"user.valid?#=>trueuser.save#=>true如何在不修改用户对象模型的情况下防止将用户对象保存在Rails3.2中

  10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

随机推荐