3

管理目的で Adob​​e Creative SDK 製品をサイトに実装しています。管理者は、特定の画像 (フロントページのスライダーで使用される) にアクセスし、編集し、保存することができます。

問題は、onSave() コールバック関数を利用する方法に関する Adob​​e のドキュメントが非常に曖昧なことです。答えを見つけるために、古いサイトである Aviary に行かなければなりませんでしたが、それでもかなりあいまいです。

まず、MySql DB クエリを使用してサーバーから画像を取得しています (スライダーには少なくとも 2 つの画像があるため、これを静的ではなくデータベース駆動にしたかったのです)。画像は、DB 内の画像を参照してファイルとして保存されます。

次に、画像がページに表示されると (すべての画像がテキスト オーバーレイ、リンクなどとともに管理ページに表示されます)、管理者は画像をクリックすると、Adobe Creative SDK が呼び出され、エディター ウィンドウが表示されます。 . すべて良い。

第 3 に、編集後に管理者が「保存」をクリックすると、編集内容が Adob​​e クラウドに一時的に保存されます (編集された画像がページ上の元の画像に置き換わります)。私が必要とするのは、元のイメージをオーバーライドしてサーバーにイメージを保存することです(DBの更新を行う必要はありません-余分な作業が多すぎます)。

これは、Adobe と 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() コールバックが起動され、そのコールバック関数で画像をローカルに保存できます。

しかし、アドビはこれを達成するために次の例のみを提供しており、私にはほとんど意味がありません:

まず、これを onSave() 関数に追加する必要があるようです:

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

「/save」は、実際に作業を行うために使用するphpスクリプトであると想定しています...または、画像を保存するサーバー上の場所である可能性があります...わかりません。「postdata」には、「元の画像への参照」が必要であると書かれていますが、それを取得する方法がよくわかりません。フェザーエディターに渡されたように見えるため、launchEditor() 関数から「url」を使用してみましたが、うまくいきませんでした。

誰かがこれを理解するのを手伝ってくれれば、節約を行うサーバー側のphpを簡単に処理できます。しかし、アドビが保存した新しい画像を取得して、サーバー上の古い画像を上書きする方法がわかりません。ありがとう！

4

1 に答える 1

4

画像編集onSave()方法

onSave()単なるフックです。画像の保存が完了した後に呼び出されるメソッドです。メソッドの中に何を入れるかonSave()は完全にあなた次第です。

たとえば、1) 元の画像要素のソースを新しく編集した画像の URL に置き換え、2) エディターを閉じます。

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

コンソールログをそこに置くことさえできますが、それはユーザーにとってあまり役に立ちません.

繰り返しonSave()ますが、保存が完了した後に使用される単なるフックであり、その内容は完全にあなた次第です。

サーバーへの投稿

質問で示したコードは、画像エディターのメソッド内で jQuery を使用してサーバーにデータを投稿する方法の例にすぎませんonSave()。このようにする必要はありません。jQuery を使用する必要さえありません。

わかりやすくするために、その例をもう一度見てみましょう。

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

エンドポイント

上記の例では、jQuerypost()メソッド/saveを使用して、サーバー上のエンドポイントにヒットします。このエンドポイントは、任意のものにすることができます。サーバーに というエンドポイントがある場合は/upload-image、代わりにそれを使用できます。

あなたの場合、このエンドポイントには、画像ファイルの保存とデータベースの更新を処理する PHP スクリプトがあります。

投稿データ

の 2 番目の引数post()は、渡したいデータを持つオブジェクトです。この例では、以下を渡しています。

  1. サーバーがそれを使っnewURLて何かできるように、編集された画像の.
  2. postdataサーバーがどの画像が編集されたかを知ることができるように、元の画像への参照（ここでは任意に名前を付けます）

このオブジェクトには何でも入れることができます。サーバースクリプトが必要とするものによって異なります。しかし、最低限、newURLデータベース内の元の画像を参照するための何らかの方法が必要になると思います。

重要な注意事項: Creative SDK for web Image Editor ガイドに記載されているように、メソッドでnewURL受け取る は一時的な URLです。有効期限は 72 時間です。つまり、サーバー スクリプトは画像自体をサーバーに保存する必要があります。URL だけをデータベースに保存すると、72 時間以内に画像が消え始めます。onSave()

于 2016-01-07T16:19:11.883 に答える