Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using Images Stored in HDFS for Web Pages [Code Snippet]

DZone's Guide to

Using Images Stored in HDFS for Web Pages [Code Snippet]

This article is about accessing images stored in Hadoop HDFS via image tags and using them in Java Spring applications.

· Big Data Zone ·
Free Resource

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

With NiFi 1.00 I ingested a lot of image data from drones, mostly to get metadata like geo. I also ingested a resized version of the image in case I wanted to use it. I found a use for it.

I am pulling this out very simply with Spring for a simple HTML page. So I wrote a quick Java program to pull out fields I stored in Phoenix (from the metadata) and I wanted to display the image. I could have streamed it out of HDFS using HDFS libraries to read the file and then stream it.

sql = "select datekey, fileName, gPSAltitude, gPSLatitude, gPSLongitude, orientation,geolat,geolong,inception from dronedata1 order by datekey asc";
out.append(STATIC_HEADER);
PreparedStatement ps = connection.prepareStatement(sql);
ResultSet res = ps.executeQuery();
while (res.next()) {
    try {
      out.append("<br><br>\n<table width=100%><tr><td valign=top><img src=\"");
      out.append("http://tspanndev10.field.hortonworks.com:50070/webhdfs/v1/drone/").
      append(res.getString("fileName")).append("?op=OPEN\"></td>");
      out.append("<td valign=top>Date: ").append(res.getString("datekey"));
      out.append("\n<br>Lat: ").append(res.getString("geolat"));
      out.append("\n<br>Long: ").append(res.getString("geolong"));
      out.append("\n<br><br>\n</td></tr></table>\n");
    } catch (Exception e) {
      e.printStackTrace();
    }
 }

It was a lot easier to use the built-in WebHDFS to display an image. Wrapping the Web API call to the image file in an HTML IMG SRC tag loads our image.

http://node1:50070/webhdfs/v1/drone/Bebop2_20160920083655-0400.jpg?op=OPEN

It's pretty simple and you can use this with a MEAN application, Python Flask or your non-JVM front-end of choice. And now you have a solid distributed host for your images. I recommend this only for internal sites and public images. Having this data publicly available on the cloud is dangerous!

References:

https://community.hortonworks.com/articles/14803/webhcat-and-webhdfs-tutorial.html

Hortonworks Community Connection (HCC) is an online collaboration destination for developers, DevOps, customers and partners to get answers to questions, collaborate on technical articles and share code examples from GitHub.  Join the discussion.

Topics:
java ,mean ,solid ,webhdfs ,front-end ,python ,flask ,big data

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}