Vaadin - Display/Render base64 encoded Tiff image into Grid

Flow
1

Hi,

Vaadin version: 14.3.5
Browser to be supported: Chrome, IE and Mozilla Firefox

I want to render base64 encoded Tiff image string into vaadin grid component.

I have tried template render with HTML and it is working fine to render JPEG & PNG base64 string but not working for Tiff.
Because rendering Tiff image not supported by majority of the browser as mentioned in the below links.
https://stackoverflow.com/questions/51870394/displaying-the-base64-tiff-images-in-html
https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

this.grid.addColumn(TemplateRenderer.<SearchResult>of(
  "<div><img style='height: 80px; width: 80px;' src='[[item.label]
]'/></div>"
)

I have found the TiffViewer add on in the vaadin directory but it is not supported in Vaadin 14.
https://vaadin.com/directory/component/tiffviewer

Due to the dependency library version (JSoup), I am getting the below error.

java.lang.NoSuchMethodError: org.jsoup.nodes.DocumentType.<init>(Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;)V
	at com.vaadin.flow.server.BootstrapHandler$BootstrapPageBuilder.getBootstrapPage(BootstrapHandler.java:531) ~[flow-server-2.3.4.jar:2.3.4]

	at com.vaadin.flow.server.communication.WebComponentBootstrapHandler.synchronizedHandleRequest(WebComponentBootstrapHandler.java:213) ~[flow-server-2.3.4.jar:2.3.4]

	at com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:40) ~[flow-server-2.3.4.jar:2.3.4]

	at com.vaadin.flow.server.VaadinService.handleRequest(VaadinService.java:1545) ~[flow-server-2.3.4.jar:2.3.4]

	at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:247) ~[flow-server-2.3.4.jar:2.3.4]

	at com.vaadin.flow.spring.SpringServlet.service(SpringServlet.java:108) ~[vaadin-spring-12.3.1.jar:na]

	at javax.servlet.http.HttpServlet.service(HttpServlet.java:741) ~[tomcat-embed-core-9.0.35.jar:9.0.35]

	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) ~[tomcat-embed-core-9.0.35.jar:9.0.35]

	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-9.0.35.jar:9.0.35]

There is a suggested options that convert Tiff to JPEG/PNG and render with HTML tag but my requirement is not to covert into another image format.

Trying to achieve the functionality using external Javascript library such as,
https://github.com/seikichi/tiff.js refering the implementation in https://github.com/Artur-/threejs-vaadin/tree/master/frontend but no luck getting “undefined” for Tiff.

Is there a way to render base64 encoded string Tiff images into Vaadin Grid?

Thanks,
Uvaraj Seerangan

2

I have found the TiffViewer add on in the vaadin directory but it is not supported in Vaadin 14. https://vaadin.com/directory/component/tiffviewer

Yes, you do not need that one with Vaadin 14.

Due to the dependency library version (JSoup), I am getting the below error.

Yes, that happens with duplicate dependency because of that add-on.

Your code is a good start

    grid.addColumn(TemplateRenderer.<SearchResult>of(
            "<div><img style='height: 80px; width: 80px;' src='[[item.imagedata]
]'/></div>"
             ).withProperty("imagedata",item -> getImageAsBase64(item.getImage())));

Lets assume getImage returns byte array of the image.

Then you need something like:

TRANSPARENT_GIF_1PX = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";

private String getImageAsBase64(byte[] value) {
	String mimeType = "image/png";
	String htmlValue = null;
	if (value == null) htmlValue = TRANSPARENT_GIF_1PX;
	else htmlValue = "data:"+mimeType+";base64," + Base64.getEncoder().encodeToString(value);
	return htmlValue;
}
3

Thanks for your response Tatu Lund.

getImage returns base64 string of TIFF image.

My question is rendering base64 TIFF image string with HTML <IMG…> wont work in browsers such as chrome.

Is there a way to render base64 string TIFF image in vaadin?

Thanks
Uvaraj Seerangan

4

Is there a way to render base64 string TIFF image in vaadin?

No, there is nothing specific for TIFF. This is actually upto Browsers to handle. And as mentioned TIFF is not supported by all browsers, like Chrome you mentioned. I would recommend to use PNG/GIF/JPEG for the widest Browser compatibility.

5

Tatu Lund:

Is there a way to render base64 string TIFF image in vaadin?

No, there is nothing specific for TIFF. This is actually upto Browsers to handle. And as mentioned TIFF is not supported by all browsers, like Chrome you mentioned. I would recommend to use PNG/GIF/JPEG for the widest Browser compatibility.

Thanks Tatu Lund,

How about trying using external java script libraries.

I have tried tiff.min.js but facing webpack issue.

https://vaadin.com/forum/thread/18455884

Could you please help me on this.

6

Another approach would be to do TIFF → PNG or JPEG conversion in your Java code, here are some pointers to suitable libraries you can add to your project and do it:

https://stackoverflow.com/questions/15429011/how-to-convert-tiff-to-jpeg-png-in-java