Edited at

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

画像転送サーバーが必要になって、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;