javascript — Adobe Creative SDK для веб-сайтов с сохранением отредактированного изображения

Я внедряю продукт Adobe Creative SDK на свой сайт для административного использования; администраторы могут получить доступ к определенным изображениям (используется на слайдере главной страницы), редактировать и сохранять.

Проблема в том, что документация Adobe о том, как воспользоваться функцией обратного вызова onSave (), очень расплывчата. Я должен был пойти на старый сайт, Aviary, чтобы найти ответы, но даже там это довольно расплывчато.

Во-первых, я вытаскиваю изображения с сервера с помощью запроса MySql DB (в слайдере есть как минимум 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-скрипт, который я использую для выполнения работы … или, может быть, это местоположение на сервере для сохранения изображения … не уверен. «Постданные» говорят, что для этого нужно «иметь некоторую ссылку на исходное изображение», но я не знаю, как это получить. Я попытался использовать «url» из функции launchEditor (), потому что кажется, что оно было передано в featherEditor, но это не сработало, просто я возвратил нулевое значение, когда я сделал alert ().

Если кто-то может помочь мне понять это, я могу легко позаботиться о php на стороне сервера, который делает сохранение. Но я просто не знаю, как получить новое изображение, сохраненное Adobe, чтобы переопределить старое изображение на моем сервере. Спасибо!