読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Django Adobe Creative SDK を使ってみたときの話

概要

Djangoで、画像処理をするときに、backendではなく、frontendで直感的に、操作できるようなものを作りたかったので、Adobe Creative SDKを導入してみた。

参照サイト

ほぼ以下のサイトの手順通りになっています。

plus.appgiga.jp

手順

必要なファイルを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
    });
});