LoginSignup
5
7

More than 5 years have passed since last update.

Node-REDサーバーにWeb画像をポストして表示する

Last updated at Posted at 2018-09-18

画像転送サーバーが必要になって、PythonとNode-REDでつくりました。
例によってたくさんのサイトを参考にしています。
コードを公開されている皆様に感謝いたします。

  • Web画像を保存し、Node-REDサーバーに2秒おきに転送するPythonスクリプト
jpegsend.py
import requests
import urllib.error
import urllib.request
from time import sleep

def download_image(url, dst_path):
    try:
        data = urllib.request.urlopen(url).read()
        with open(dst_path, mode="wb") as f:
            f.write(data)
    except urllib.error.URLError as e:
        print(e)

while (True):

    url0 = 'jpeg画像を取得するURL'
    dst_path = './image1.jpg'
    download_image(url0, dst_path)

    MIMETYPE = 'image/jpeg'

    if __name__ == "__main__":

        fileName = './image1.jpg'
        fileDataBinary = open(fileName, 'rb').read()
        files = {'uploadFile': (fileName, fileDataBinary, MIMETYPE)}

        url = 'node-REDサーバーのURL'
        response = requests.post(url, files=files)
        print(response.status_code)

    sleep(2)
  • node-RED側

認証のためにnode-red-contrib-httpauthを登録している。

node-red.png

dispjpg.json
[{"id":"7246d857.b109b","type":"tab","label":"フロー 2","disabled":false,"info":""},{"id":"fd2826b0.4b19d8","type":"http response","z":"7246d857.b109b","name":"","statusCode":"","headers":{},"x":650,"y":60,"wires":[]},{"id":"41aae946.8eed9","type":"function","z":"7246d857.b109b","name":"画像データ生成","func":"if (msg.req.files[0].mimetype.includes('image')) {\n    msg.payload = `<img src=\"data:image/jpeg;base64,${msg.payload.toString('base64')}\">`;\n} else {\n    msg.payload = msg.payload.toString();\n}\n\nglobal.set(\"html\",msg.payload);\n\nreturn msg;","outputs":1,"noerr":0,"x":479,"y":59,"wires":[["fd2826b0.4b19d8"]]},{"id":"6e51f024.8a6e1","type":"http in","z":"7246d857.b109b","name":"","url":"/upload","method":"post","upload":true,"swaggerDoc":"","x":90,"y":58,"wires":[["8f93f075.22bd98"]]},{"id":"8f93f075.22bd98","type":"change","z":"7246d857.b109b","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":59,"wires":[["41aae946.8eed9"]]},{"id":"e40bfa26.237f78","type":"http in","z":"7246d857.b109b","name":"","url":"/image","method":"get","upload":false,"swaggerDoc":"","x":90,"y":120,"wires":[["bb536c8d.8152d8"]]},{"id":"3b62ead8.43715e","type":"http response","z":"7246d857.b109b","name":"","statusCode":"","headers":{},"x":570,"y":120,"wires":[]},{"id":"626638a7.cf3d8","type":"function","z":"7246d857.b109b","name":"画像表示","func":"msg.payload=global.get(\"html\");\nreturn msg;","outputs":1,"noerr":0,"x":420,"y":120,"wires":[["3b62ead8.43715e"]]},{"id":"bb536c8d.8152d8","type":"node-red-contrib-httpauth","z":"7246d857.b109b","name":"認証","file":"","cred":"d0aaf5ec.7780f","authType":"Basic","realm":"","username":"","password":"","hashed":false,"x":250,"y":120,"wires":[["626638a7.cf3d8"]]},{"id":"d0aaf5ec.7780f","type":"node-red-contrib-httpauthcred","z":"","name":"","authType":"Basic","realm":"user","username":"username","password":"password","hashed":true}]

「画像データ生成」ノードのスクリプト(https://gist.github.com/natcl/4d8dd65a0304ea62594d39768becfed9
を参照)

if (msg.req.files[0].mimetype.includes('image')) {
    msg.payload = `<img src="data:image/jpeg;base64,${msg.payload.toString('base64')}">`;
} else {
    msg.payload = msg.payload.toString();
}

global.set("html",msg.payload);

return msg;
5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7