メモ

Node-REDからGyazo APIに画像データを保存するメモ

Posted on by seigo

Node-REDからGyazo APIに画像データを保存するメモです。

大事なポイント

この記事は、Node-REDのバージョンによって http-request ノードが進化してるのか挙動が違うようなので、以下のバージョンで試してうまくいったことをお伝えしておきます。

  • Node-RED 1.0.3
    • おそらく今後も使える
  • Node-RED 0.20.8
    • 上記もひとつ手前のバージョン。このバージョンも使えた。

Gyazoアプリケーションの準備

まずアプリを登録する

Gyazo APIの仕様を確認しつつ、アプリを作成しましょう。

image

アプリの名前やCallback URLを設定します。Callback URLはとりあえず適当なもので大丈夫です。

image

アプリが作成されました。

image

Your Access Tokenのところで Generate してアクセストークンを準備しておきます。今回は client_id と client_sercret は使いません。

これで、Gyazo APIの準備は完了です。

Node-REDのフローを作る

image

Gyazo API のアップロードAPI部分を参考に進めます。

image

フローJSONはこちらです。

[{"id":"a602c73f.24c6d8","type":"inject","z":"82dff8a4.62ae48","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":280,"wires":[["333a23eb.42507c"]]},{"id":"333a23eb.42507c","type":"file in","z":"82dff8a4.62ae48","name":"file to buffer","filename":"YOUR_FILE_PATH","format":"","chunk":false,"sendError":false,"encoding":"none","x":470,"y":280,"wires":[["6027cd98.1a7664"]]},{"id":"cf90dab5.815908","type":"debug","z":"82dff8a4.62ae48","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1070,"y":280,"wires":[]},{"id":"2bad63ae.e41bbc","type":"http request","z":"82dff8a4.62ae48","name":"","method":"POST","ret":"txt","paytoqs":false,"url":"https://upload.gyazo.com/api/upload","tls":"","persist":false,"proxy":"","authType":"basic","x":790,"y":280,"wires":[["8037b4c8.94c7c8"]]},{"id":"8037b4c8.94c7c8","type":"json","z":"82dff8a4.62ae48","name":"","property":"payload","action":"","pretty":false,"x":930,"y":280,"wires":[["cf90dab5.815908"]]},{"id":"6027cd98.1a7664","type":"change","z":"82dff8a4.62ae48","name":"setting http","rules":[{"t":"set","p":"imagedata","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"multipart/form-data","tot":"str"},{"t":"set","p":"payload.access_token","pt":"msg","to":"YOUR_ACCESS_TOKEN","tot":"str"},{"t":"set","p":"payload.imagedata.options.filename","pt":"msg","to":"image.png","tot":"str"},{"t":"set","p":"payload.imagedata.value","pt":"msg","to":"imagedata","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":280,"wires":[["2bad63ae.e41bbc"]]}]

アクセストークンを変更する

2020/2/16現在、この仕組みで動きます。

image

こちらのノードの設定を変更します。

image

YOUR_ACCESS_TOKENのところを、先ほどメモしたアクセストークンに置き換えます。

読み込みたいファイルパスを指定します

image

こちらの file ノードの読み込むファイルパスを指定します。

image

YOUR_FILE_PATH で読み込みたいローカルの画像ファイルをのフルパスを指定します。

たとえば、Windowsの場合

C:\Users\tnkse\Screenpresso\2020-02-16_23h54_17.png

のようなフルパスです。設定を終えたらデプロイして仕組みを保存しましょう。

動かしてみる

image

inject ノードのボタンを押して動かしてみましょう。

image

無事登録されると、debugノードに保存結果のJSONが返ってきます！

image

Gyazo側にもデータが保存されていることが確認できます。

Raspberry PiのNode-REDで撮影したWebカメラ画像をMicrosoft Custom Vision Serviceで判定させるメモでも使った、Raspberry Piで使えるUSBカメラノードでも画像ファイルで保存する仕組みがあるので、うまく使えば、保存したカメラ画像をGyazoに送るといったこともできそうですね！

、
seigo