Show image properties

[bartbutenaers]

Hi Riku (@rikukissa),

Here is your private stalker again ;-) Have an idea, but want to get your opinion first ...

Suppose I want to get extra info about my video stream to debug it, like image speed / resolution / format. Currently I need to add some extra nodes to my flow, to accomplish this:

Note: in the flow in use my node-red-contrib-msg-speed node, but the ImageResolution node is just a test node that I created this evening (not available on npm yet!).

To use your contribution to simplify image debugging, it could be useful to show extra information. Do you think it would be useful to add this kind of info also to your contribution? Something like this:

Or do we have to keep this in separate nodes (like in the first screenshot), because a node should do a single thing? I would prefer to integrate it into your node, but keep it simple (e.g. only show speed per second, not minute ...). If they want more complex setup, then they need to use the speed node.

Kind regards, Bart

[rikukissa]

Hi!

I think at least showing the original size of the image would be useful. I guess there's no harm in adding format and speed as well if they can be determined reliably enough. I like the idea 👍

[bartbutenaers]

Riku,

There is something I hadn't thought about, when I registered this issue: you also accept base64 encoded images, and those cannot be analysed to get their resolution :-(

We could decode those base64-encoded images again in your node, but that would result in a performance loss. To cope with this disadvantage, we might add:

• A checkbox to the config screen 'Display image resolution', so users can choose whether they want to do the extra processing to display the information.
• A note to the readme file: "base64 encoded images are accepted, but will be less performant".

Any thoughts on that ? Bart

[rikukissa]

I think another option could also be to do something like this in the render function in image.html file

const img = new Image()
img.onload = () => {
  addImageDimensionsToBox(img.width, img.height)
}
img.src = `data:image/png;base64,${data}`

It shouldn't cause any noticeable performance decrease

[bartbutenaers]

Your code snippet is very simple, but should do the job. Brilliant idea! I was focussing on analyzing the image on the server side ...