How do I embed images from database into web pages - java

One possible way of storing images in a database is as a stream of bits. This works as a storage mechanism, but I can't figure out how to embed this data into a webpage as an image once I extract it to fulfill a client request.
I'm working with Servlets in Java. Can anyone give me some guidance?

You probably want to write a servlet that reads the BLOB from the database and copies directly into HttpServletRequest.getOutputStream(), remembering to set the content type to the appropriate format (image/png for example).
The database id or key or whatever can be encoded in the path (/image/foo), or passed as a query parameter (/image?id=foo). This path is what you use in your <img> tag.
This is probably best written in actual Java, rather than JSP or similar presentation technologies.

Let me share what I am doing with image files and dynamic HTML generation and why - I believe this is a non-standard approach, feel free to comment or use such a system if it works for you. :)
I have several parameterized html, style sheets and image files that go into the html jarred up and saved as [clientid].jar file on the server side. The UI is applet based. At a lean time, the applet requests the file (and associated logic) from the servlet, after due authentication. The servlet wraps up the entire jar file as byte array, encapsulates its contents (from predefined directory in the unix FS) and the business logic (from the database) in a FileXfer object and sends it out on an ObjectOutputStream. The applet extracts the bytes and saves the jar as a tmp file in tmpdir, with a deleteOnExit flag.
During execution, when the html is required to be displayed, the applet extracts the necessary files from the archive and saves them in the same directory, filtering the html as required by the business logic. Image files (jpeg, png, etc) are not filtered. All such files are deleteOnExit, so there is no footprint once the application exits. Next it opens the html with a browser tab, and everything I need to display is there in the right format. The applet has the logic of file extraction - e.g., do not extract "logo.png" if it was extracted 15 seconds back to display another piece of HTML, etc.
The advantages I see are:
I get an automatic compression of the bytes I need to transfer from the server to the client, speeding up the transfer by about 3x, (jar uses zip-compression)
The client (applet) picks up the load of filtering the html, thereby relieving the server of the same job
No blob storage of image files on the DB (I read somewhere that blobs are not exactly efficient for DB operations)
The html can be edited independently using standard img tags assuming the image file is in $cwd
[clientid].jar file content is not included in the jar containing the applet class, allowing the applet to load and start up faster.
TIA for your comments, - M.S.

Related

Upload a HTML page to server along with the referenced images using Java

I am working on a code, that requires uploading of any kind of document from client's machine to the server, and extracting images out of it. For almost all docs Tika is helpful, but in case of an html page, the images are referenced to the local machine's path. So how do I upload the html page along with the images it contains?
I'm using Java Servlets and JSP as platform.
This is impossible to solve server-side, you have to implement a client-side (Javascript? Java applet? Flash (yuck!)?) solution. The HTML document is just a text, it does not contain the images - it just references them. So you have to parse the document, get the images, upload them independently, and then - server-side - process the document and adjust the image references (the values of src attributes).
Pretty complex, isn't it?

Generate image and display it inside JSP along with other content

I'm using JFreeChart to generate a dynamic chart depending on the user input. I have a JSP with some textbox and combobox, the user makes the input and submits it, and the Action process it, generating an image of a chart. I need to display this image on the same JSP as before, below the textbox/combobox.
If I use response.setContentType("image/jpeg"); etc... then I get a page with the image alone. I thought of saving the image to a file and then access it with <img >, but I'm not sure that will work (need to save it to WebContent and I may not be able to access it always?).
Is there a way to somehow cache the image and then access it inside the JSP through an <img> or something? Maybe JFreeChart has an easy way to do what I want?
If it matters, I'm also using struts and spring on my webapp.
Thanks in advance.
I've not tried it, but you might look into org.jfree.chart.imagemap and a suitable URL generator from org.jfree.chart.urls. An outline of implementing a PieURLGenerator is illustrated here.
Well, if you generate the image on the server side, you could always just store it in a temp directory using something like a UUID to generate a unique name for it, and concatenating the image file extension on the end of it.
Make sure that the directory the image is generated is accessible on the webserver, and then send the URL path to the image file on the server back to the JSP using ajax (Direct Web Remoting), for display using Javascript.
Just make sure you also have a chron job or service to clear the older files out of the directory now and again.
You should have a servlet that can create the image you want solely from the URL. The URL can then contain an id, which maps back to an object in your program containing raw data in memory. The servlet then generates the image and returns it.
You can then simply set the url of the image in your current web page in Javascript, and it should be loaded.
This is because JSP's are character oriented which do not lend well to binary data so you need to have a servlet do it.

Resaving A Blob File In Java

I have a web application in GWT and a complementary desktop client also written in Java (so the same solution basically applies to both). In my program users can attach files, then download them later or do whatever. These files are stored as blobs and can be in just about any format. Many of the users that use Excel and Word want to be able to open the file, make changes, then have those changes stored back in the attached file. In other words, need an inline editing of attachments.
Any ideas on how to make this happen? Should I have an 'edit' mode that keeps a file handler while the file is open, and then store that File handler? Some way keeping track of whether the file is changing, or not?
Sorry about the late response. Amol >> I have that going. I want to save directly back to a blob as if it were a filehandle. Thought that was clear in my question.
I have decided that this is almost impossible with a web application without writing some kind of client interface for each and every potential file type - word, excel, pdf, graphics, etc...

How can I append a .png image into a html file using java?

I generate a html file using log4j WriterAppender file. I also takesnapshots of my screen using webdriver. Now I wish to append them together.
Any idea how to do that?
Thanks!
Apologies for not being clear and daft. My situation is that I have got a html file which is generated dynamically by my logger class and then there are some .png file which are also being created dynamically. Now I want them to appear together in one file. Am I clear now? Please ask for more information if needed
It's possible to embed graphics data in a couple of ways. Most modern browsers accept the data: url notation. An image can be embedded straight into a url.
I took an example from this site. Cut and paste the whole line into the url bar:
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7
You should see a folder graphic. Some older browsers don't accept this, and some such as IE8 restrict content in various ways, to static content for security reasons.
The second way of doing the same is for the server to serve multi-part MIME. Basically a server would shove out a multi-part mime document consisting of the HTML body and then any inline images base64 encoded as separate parts. This is more suitable for email HTML although it might work through a web browser.
It's not quite clear what you're asking here, but let's assume that you want to manually add an image to the log output HTML file.
If you want to include an image in your HTML file, just save the snapshot PNG file in a place relative to where the HTML is generated, then include it using standard HTML syntax:
<img src="images/snapshot.png" alt="snapshot description">
Update: the requirement is to add dynamically generated PNG files to a dynamically created HTML log file.
If one process is creating both the PNG and the log output, you should be fine - just keep note of the appropriate PNG filename and include it in the logger output in an IMG tag (as described above).
If they are generated by separate processes, this may be more difficult; you would need to either stick to a known naming convention, have the process generating the log query the filesystem to determine the appropriate PNG file to include, or build some sort of message-passing between the two processes.
Please stop posting the same comment to each and any of the different answers given to you, when all of those answers basically tell you that the notion of concatenating two different file formats into a single file is not meaningful.
Let me repeat that again for clarity: Copying a PNG file into a HTML document makes no sense.
You either save the PNG in a directory where it's accessible in the HTML document and add an img tag so it can be referenced (see the answer by stark), which would be the recommended way in terms of portability and usage of the files as they were intended to be used.
If you really, really want to end up with a single file for whatever reasons, there are bascially two options: You follow the advice of locka and encode the PNG image with Base64 and insert an img tag with a data URI at a meaningful position. This probably involves parsing the HTML "a little" to come up with a good place to insert it.
The other option is to not create HTML, but MHTML files. MHTML is a file format that allows saving HTML source code and resources like images into a single file. MHTML is supported by the most popular browsers nowadays, you may find info on the file format here: http://people.dsv.su.se/~jpalme/ietf/mhtml.html
In the code where you are generating the html you should just include the img using the img html tag
If you want the picture to appear in the html, add the tag
<img src=./img.png /> to your html.
If you want the 2 files in one, you'll need to zip them into an archive or something?
It makes no sense to append a HTML file to a PNG file, or vice-versa. Neither file format allows this, so if you do this you will end up with a "corrupt" document that a typical web browser or image viewer won't understand.
"I want them to appear together in one file".
That's still pretty vague, I'm afraid.
Assuming that you want the image to appear embedded in the HTML document when you open the HTML document in a browser, the simple solution is create separate HTML and PNG files, and have the HTML file link to the PNG file using an <img> element.
If you want, you can bundle up the files (and others) as a ZIP or TAR file, so that you can deliver everything as a single file. However, a ZIP/TAR file typically needs to be extracted before the document can be viewed. (A typical web browser won't "display" a ZIP file. Rather it will open it in some kind of archive extractor or directory browser, allowing the user to access the individual files.)
It might also be possible to embed an image file in a HTML file by base64 encoding the image, and using embedded javascript to decode the image and then insert it into the DOM ... But this is probably waaay to complicated.

How can I convert one slide of a PowerPoint file to flash in jsf app (using javaSE/javaEE)?

I need to show the first slide of a PowerPoint presentation in my jsf app. It must look something like that:
user upload the .ppt file to jsf app
the app take the first slide and converts it to Flash
user sees the converted slide in the separate (not as part of the another page)
I suppose that I couldn't use any external converters because the user of the system will not have them when he uses our system.
Also I'm thinkinig about Flash, not HTML, because the presentation can be dynamic.
Any ideas? Can I do this task or it's impossible and I need to think in another way (maybe restriction for end users - to save presentation as png, but I think that my boss won't like this decision).
Maybe I need to look at .xslt format, maybe it would help?
suppose that I couldn't use any external converters because the user of the system will not have them when he uses our system.
You can truly use external tools since your Java/JSF code runs at the webserver, not at the webclient (webbrowser). All the webbrowser get is just the Java/JSF-generated HTML/CSS/JS code. Open a page in webbrowser, rightclick and View Source and see it yourself. You just install the external tool at the webserver and execute it there.
To upload a file in JSF, you'll need to grab a 3rd party component library since the standard implementation doesn't have an upload component, for example Tomahawk's t:inputFileUpload or the one of whatever component library you're currently already using.
To convert PPT to Flash, execute the appropriate action using external tool in the managed bean action method and store the Flash file somewhere in the local disk file system of the webserver. You can store it in the public webcontent so that it's directly accessible by URL, but those files will be lost whenever you redeploy the webapp. If this shouldn't happen, then store it outside the public webcontent.
I don't have hands on experience with PPT-Flash converters, so I can't recommend a specific one, but Google learns me that there's pretty a lot of choice. There seems to be a Java solution of iSpring.
To display the Flash file, use the HTML <object> element which points to the URL of the Flash file. If the Flash file is stored outside the public webcontent, then you'll need to create a Servlet which gets an InputStream of the file from the local disk file system and writes it to the OutputStream of the response along a correct set of HTTP headers and then let the URL of the <object> element point to that instead.

Categories