search

rikukissa / node-red-contrib-image-output

🏞 Easy way of previewing and examining images in your flows
MIT License
13 stars 6 forks source link

Is this still working in the latest version of Node Red? #10

Closed RayPS closed 5 years ago

RayPS commented 6 years ago

Tried both binary buffer or Base64 encoded either doesn't work. Am i missing something?

rikukissa commented 6 years ago

I'd imagine so yes, but haven't tried this in the last few months. Should work if node-red's API hasn't drastically changed

RayPS commented 6 years ago

I have found the problem. I inspected the image output node in flow editor.

The width and height for <polygon id="image-output-bubble-xxxxx"></polygon> are both 0

And the height for <image id="image-output-img-xxxxx"> are 0

RayPS commented 6 years ago

After a few hours of research, I have found the reason. This node only display the image in Chrome.

The <image> svg element doesn't provide a height attribute, but the auto sizing is still displayed correctly in Chrome.

That is because auto value for width and height in <image> is SVG2 features. SVG 2 currently still a draft. Only Chrome implemented this unfinished specification which Safari and Firefox doesn't.

I made a demo to test this in various Browsers http://jsfiddle.net/s4mxzofc/8/

<!DOCTYPE html>
<html>
<body>

<h1>SVG image tag without width/height</h1>
<svg width="200" height="200">
  <image xlink:href="https://picsum.photos/200/200"></image>
</svg>

<h1>SVG image tag with width/height</h1>
<svg width="200" height="200">
  <image width="200" height="200" xlink:href="https://picsum.photos/200/200"></image>
</svg>

</body>
</html>

Only Chrome displayed both two image and Safari and Firefox displayed only the second image.

To fix this issue, i don't know if there is a way to get the image's actual file dimension using JavaScript so we can calculate the height by the giving width with aspect ratio.

If this is not possible, maybe we can add a field for height in the node setting. Otherwise, we can make the box a 1:1 rectangle aspect ratio by the giving width, the image will fit in the square box, i prefer this way because typically previewing an image doesn't require too many sizes.

I want to hear your thoughts and discuss, I would happy to make changes and send PR.

The-Weintek-Expert commented 5 years ago

After using this plugin for node-red i faced also this problem that the picture is not showed in firefox only in chrome. It seems you can use natural.height and width to see what original sizes are. Otherwise i should suggest to make a field where the width can be filled in. see also:

http://usefulangle.com/post/70/javascript-get-image-dimensions-width-height

dceejay commented 5 years ago

fixed in version 0.4.1