편집된 이미지를 웹에 저장하기 위한 Adobe Creative SDK (Adobe Creative SDK for Web saving edited image)

문제 설명

편집된 이미지를 웹에 저장하기 위한 Adobe Creative SDK (Adobe Creative SDK for Web saving edited image)

관리용으로 내 사이트에 Adobe Creative SDK 제품을 구현하고 있습니다. 관리자는 특정 이미지(프론트 페이지 슬라이더에서 사용)에 액세스하여 편집하고 저장할 수 있습니다.

문제는 onSave() 콜백 함수를 활용하는 방법에 대한 Adobe의 문서가 매우 모호하다는 것입니다. 답을 찾으려고 예전 사이트인 Aviary를 방문해야 했지만 거기도 애매합니다.

먼저 MySql DB 쿼리를 사용하여 서버에서 이미지를 가져옵니다(최소 2개의 이미지가 있습니다). 슬라이더에서 정적이 아닌 데이터베이스 기반이 되기를 원했습니다). 이미지는 이를 참조하여 DB에 파일로 저장됩니다.

둘째, 이미지가 페이지에 표시되면(모든 이미지는 텍스트 오버레이, 링크 등과 함께 관리 페이지에 표시됩니다.) ), 관리자가 이미지를 클릭하면 Adobe Creative SDK가 호출되고 편집기 창이 표시됩니다. 좋습니다.

셋째, 편집 후 관리자가 "저장"을 클릭하면 편집 내용이 Adobe 클라우드에 임시로 저장되고 편집된 이미지가 페이지의 원본 이미지를 대체합니다. 내가 필요한 것은 이미지가 원본 이미지를 재정의하는 내 서버에 저장하는 것입니다(DB 업데이트를 수행할 필요가 없습니다 ‑ 너무 많은 추가 작업).

여기가 모호한 지침입니다. 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;
}

기본적으로 각 이미지 다음과 같은 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'는 "원본 이미지에 대한 참조"가 필요하다고 말하지만 실제로 가져오는 방법을 모르겠습니다. "url"을 사용해 보았습니다. 그것이 featherEditor에 전달된 것처럼 보이지만 작동하지 않았기 때문에 launchEditor() 함수에서 가져온 것입니다. 경고()를 수행했을 때 null 값을 반환했습니다.

누군가가 저를 도와줄 수 있다면 이것을 알아내면 저장을 수행하는 서버 측 PHP를 쉽게 처리할 수 있습니다. 하지만 Adobe가 내 서버의 이전 이미지를 재정의하기 위해 저장한 새 이미지를 가져오는 방법을 모르겠습니다. 감사합니다!

참조 솔루션

방법 1:

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:

1. the newURL of the edited image so your server can do something with it (see Important note below)
2. a reference to the original image (arbitrarily named postdata here) 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.

(by Daniel Carlson、Ash Ryan Arnwine)

참조 문서

1. Adobe Creative SDK for Web saving edited image (CC BY‑SA 2.5/3.0/4.0)