Convert string to image

[LinkView_Maze]

Hello

i am a object json with name : jpeg : [data]
This object is encoded to base64 . I use node base64 but i don't have the good result.

for example the data in string receive with my API

/9j/4QDeRXhpZgAATU0AKgAAAAgACAEAAAQAAAABAAAFAAEBAAQAAAABAAAC0AEQAAIAAAAJAAAAbgEaAAUAAAABAAAAeAEbAAUAAAABAAAAgAEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAAiAAAAABCcm9hZGNvbQAAAAAASAAAAAEAAABIAAAAAQAGkAAABwAAAAQwMjIwkQEABwAAAAQBAgMAoAAABwAAAAQwMTAwoAEAAwAAAAEAAQAAoAIABAAAAAEAAAUAoAMABAAAAAEAAALQAAAAAP/bAIQABgQEBQQDBgUEBQYGBgcIDgkICAgIEQwNCg4UEhUVFBITExYZIBsWFx4YExMcJRweISIjJCMVGicqJyIpICMjIgEGBgYIBwgQCQkQIhcTFyIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi/8AAEQgC0AUAAwEiAAIRAQMRAf/EAaIAAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKCxAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6AQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgsRAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWm...

but I don't know if the data is complete.

I want to decrypt the data to display it on my dashboard

[marcus-j-davies]

Hi @LinkView_Maze

The debug pane limits the number of characters, so when viewing it in the debug, it will be capped at debugMaxLength as set in the settings file of Node RED - but the object passing through the flow will be in its full glory.

I dont use Dashboard, but if you can use an image tag with the following

msg.payload being the base 64 string

<img src="data:image/jpeg;base64, {{msg.payload}}" />

[LinkView_Maze]

@marcus-j-davies

img src="data:image/jpeg;base64, {{msg.payload}}"

this code is use une node-function ?

[marcus-j-davies]

Try this.

1st

In a template node (directly after the node giving you the base 64 string) set the following:
correcting the path where necessary

<img src="data:image/jpeg;base64,{{payload}}" />

2nd
Attach this template node to a ui_template node with the following content

<div ng-bind-html="msg.payload"></div>

Explanation:
We are creating an image tag, with the source image in a template node
we then set this as the content of a div tag via the ui_template node

I have not researched if there are ready built nodes for the dashboard to do this - so might be worth searching also.

[LinkView_Maze]

[{"id":"438a61a2.f79ad","type":"ui_template","z":"6b8538b3.c82508","group":"b1ab9db7.da3","name":"image","order":4,"width":"4","height":"3","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":1170,"y":40,"wires":[[]]},{"id":"3c8b5a2.12414a6","type":"template","z":"6b8538b3.c82508","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img src=\"data:image/jpeg;base64,{{payload.anpr.decision.jpeg}}\" />","output":"str","x":1040,"y":40,"wires":[["438a61a2.f79ad"]]},{"id":"b1ab9db7.da3","type":"ui_group","name":"Recherche Ouverture","tab":"6d23db44.1697d4","order":4,"disp":true,"width":"9","collapse":false,"className":""},{"id":"6d23db44.1697d4","type":"ui_tab","name":"Main Tab","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Thank you for your help. I have a lag when too much json arrives, I think it's due to the file decryption time.
Afterwards I have a lot of things at stake (LTE - a lot of vehicle traffic...)

[marcus-j-davies]

What you have should work.

No need for the base64 node - as web browsers support base64 encoded images, but not raw binary strings - which will be the result if using a base64 node.

As mentioned, there maybe dashboard UI nodes, that already support base64 images - I'm not sure, but this approach will work I believe