Django Adobe Creative SDK を使ってみたときの話
概要
Djangoで、画像処理をするときに、backendではなく、frontendで直感的に、操作できるようなものを作りたかったので、Adobe Creative SDKを導入してみた。
参照サイト
ほぼ以下のサイトの手順通りになっています。
手順
必要なファイルをstatic/js にダウンロードする。
JavaScriptライブラリ「editor.js」をダウンロードして、static/js/editor.jsのような感じで保存する。
editor.jsを読み込む
javascript.html
<script src="{% static 'js/editor.js' %}"></script>
サンプルをコピペしてみる。
<!DOCTYPE html> <html> <head> <title>サンプル</title> <script src="https://dme0ih8comzn4.cloudfront.net/imaging/v2/editor.js"></script> </head> <body> <img src="ここに画像URL" id="image"> <script src="{% static 'js/main.js' %}"></script> </body> </html>
main.jsにコードを書き込む
var image = document.getElementById('image'); var Editor = new Aviary.Feather({ apiKey: '自分のadobe creative sdkのid', language: 'ja', //日本語に設定 //必要な機能だけを限定する設定 // tools: ['enhance', 'effects'], //保存したら、Webサイトの画像も反映する設定 onSave: function(imageID, newURL) { var img = document.getElementById(imageID); var downloadbtn = document.getElementById('download_btn'); img.src = newURL; downloadbtn.href = newURL;//downloadbtn idのhrefをnewURLに付け替える。 //自動生成された画像URLを、既存の画像URLと差し替え }, }); image.addEventListener('click', function () { Editor.launch({ //<img>内のidとsrcを取得 image: image.id, url: image.src }); });