I'm trying to take a byte array directly from the DB and put it into a tooltip that takes HTML. This is for consistency as text needs to be included that will match the other text-only tooltips.
I'm ideally trying to bypass the step of saving the image to a file before loading it into an img src tag. Is there a way to load a byte array (could easily be converted into Image or ImageIcon beforehand) straight into HTML?
Make an image-serving servlet, map it to an appropriate URL and just dump the image data from the database.
Edit: by the way you can have the browser cache the images with this approach, but you to do it manually.
You need to convert the bytes to base64 encoding somehow (either on the java side or the html/javascript side). And then you can write something like This:
<img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAA AAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrpTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=" alt="" width="80" height="15" />
Note that n this case, even though you save a request to fetch the image, the image itself is not cached for future use.
You may look at this:
http://www.websiteoptimization.com/speed/tweak/inline-images/
For a workaround.
Related
I am maybe asking a dumb question but I would like to be sure as my app is almost finished and I don't want to face some issue with viruses in the future
I have an app written in angular2 and a backend in java.
People can change their profile picture.
From my frontend I encode the picture in base64 and send it with a post to my rest api.
Server check the size of the base64 and reject it if it reached a certain size (but I also have a maxPostSize of 2MB in tomcat by default)
The base64 is then decoded with library net.iharder which transform it in bytearray
http://iharder.sourceforge.net/current/java/base64/
Once it is done I check if the file is a picture (and resize it as well) by creating a BufferedImage with
ImageIO.read(ByteArrayInputStream)
If it does not correspond to an image it returns null So I don't see the risk here as well.
Once it is done I store the picture in my server.
Any profile who consult the profile with picture will receive a base64 encoded image (corresponding to the uploaded one) and it will be displayed in an basic
<img src="myBase64"/>
Only JPG and PNG are allowed
My question is this one: Is there any risk for my server or for the end users if a guy send a file containg a virus? Or am I safe with the ImageIO reader.
Thanks in advance
If you store anything sent to you and send it back unchanged, then anything can happen. Just because ImageIO can read the image, doesn't mean that there's not something compromising in there.
However, if you resize the image, and use that, then there's pretty much no chance of anything surviving that as you're creating a brand new image from raw image bytes. JPG and (I guess) PNG files can contain meta data that's not part of the image, and those can potentially be vectors for exploits. But by creating a new image from the raw image data, you implicitly strip all of that.
Here i'm scaling image and saving in minImage (Buffred Image format)now how can i print that image as
BufferedImage minImage = ImageSale(buffered, minImageWidth, minImageHeight, TYPE_INT_RGB);
out.println("<img src=\""+minImage+"\">");
How to print image as thumb,please help me to resolve this issue.
You seem to have an issue with understanding the difference between a client and a server and what information they have available to each other, as well as the information that is maintained by HTML.
HTML is a plain text document, technically, it can't contain binary information (such as image data) and you really don't want to try and do this any way, as the HTML page itself should download relatively quickly.
The client HTML will need a reference to the image on the file server (or within the web servers context). This is typically done by saving the file to the server in a location which is accessible by the browser.
If you don't want to save the images to disk, then you will need to create some kind of "memory cache" which contains the key to the image, so that when the browser requests the image from the server you can look it up from the cache and return a stream of the image to the client browser.
This would require you to seed the URL with some kind of identifier that could be mapped to the cache
I am learning Inubit. I want to know, how may I store images in a database using the Inubit tool set?
The question is more than a year old. I guess you solved it by now.
For all others coming here, let me sketch out the typical way you'd do that.
0. (optional) Compress data.
Depending on the compression of the image (e.g. its GIF, PDF, uncompressed TIFF, etc. and not JPEG), you might want to compress it via a Compressor module first to reduce needed database space and increase overall performance on the next steps. Be sure to compress the binary data and not the base64-encoded string (see next step)!
1. Encode binary stream to base64.
Depending on where you get the image
data from, chances are that it already is base64 encoded. E.g. you
used a file connector to retrieve it from disk with the appropriate option checked or used a web service
connector. If you really have a binary data stream, convert it to
base64 using an encoder module (better self-documenting) or using a variable
assignment using the XPATH-function isxp:encode (more concise).
2. Save the encoded data via a database connector.
Well, the details
for doing this right are pretty much database specific. The cheap
trick that should work on any database, is storing the base64-string
simply as a string in a TEXT / CLOB column. This will waste about
three times as much space in the database as the original binary
data, since base64 is poorly packed. Doing it right would mean to
construct a forced SQL query in an XSLT that decodes the
base64-string to binary and stores it. Here is some reference
to how it can be done in Oracle.
Hope, this might be of some help.
Cheers,
Jörn
Jörn Willhöft
Willhöft IT-Beratung GmbH, Berlin, Germany
You do not store the image in the database, you only record the path to the image. The Image will be stored on the server.
Here is an example of how to store the path to the image : How to insert multiple images path to database
I'm working on some reports on a Java web application. One of the requirements I have is to be able to export the report data as PDF. The reports are made up of several elements, mostly HTML tables and SVG charts courtesy of Highcharts.
Highcharts has a built-in function that exports their graphics to PDF, but I need a document that contains the other HTML data as well, so there's no other choice but to write my own code. Since the Highcharts graphics are created on the client-side, I need to submit their SVG output to the server in order to be able to include the images on the PDF document.
My first, perhaps naive, approach, was to have a form with a hidden input such as:
<form id="fileExport" method="POST" action="servlet/FileExportServlet">
<input type="hidden" id="svgParam" name="svgParam" />
</form>
And then I would set the hidden input's value to the graphic's svg code like this:
$("div#getPDF").live("click", function()
{
//the chart svg data is inside a div with class highcharts-container
//I copy the svg to the hidden input that I will submit
$("#svgParam").val($(".highcharts-container").html());
//submit the form with the hidden input
$("#fileExport").submit();
});
The problem I'm facing, is that apparently the SVG data is too large for the hidden input's value, so when it reaches the server it is truncated. I'm submitting the form in this fashion because I don't wan't to refresh the page in order to have the download start.
I was thinking that perhaps I could encode the SVG element as a Data URI, but I suppose that it wouldn't prevent truncation either, although it would produce a shorter string most of the time.
Does anyone know a way to transfer the SVG data back to the server? (Preferably allowing some other parameters as well)
Thanks
If your form is using the POST action, data will not get truncated.
Having said that, using a text camp to send binary data is unsettling. I would try either:
a) Sending it as a file attachment (but then probably your user would need to set the field value).
b) Sending it directly to your server (for example, using CURL), separately from your HTML
c) At the very least, keep using the hidden field but at least using encode64 with the data.
This question already has answers here:
How to check a uploaded file whether it is an image or other file?
(4 answers)
Closed 8 years ago.
I want to retrieve images from a database (MySQL, saved as a LongBlob field). They can be .gif, .jpg or .png images. Returning them to the client from the servlet requires using something like, to set the content type:
response.setContentType("image/gif");
But this only works properly in all browsers if the image is a gif. Can I identify if the image is a gif or jpg by reading the bytes or can I specify a generic ContentType that handles all images.
The URLConnection#guessContentTypeFromStream() can recognize those three formats.
InputStream input = resultSet.getBinaryStream("columnname");
response.setContentType(URLConnection.guessContentTypeFromStream(input));
OutputStream output = response.getOutputStream();
// Write input to output.
If it might happen that it returns null or a !contentType.startsWith("image"), then you'd like to supply a generic image content-type of just "image". Most if not all webbrowsers are forgiving in this.
There are a few byte sequences you can detect. JPEG images all start with FF D8 for example. Just look at a few images with a hex editor and check for similarities at the beginning.
All image formats do put in their signature at the start of the file. When saving the file in the database you can go ahead and figure the value out, and then save it as another database column, so as to cache it for later reuse.
GIF file start with GIF as the first three characters. Similarly, PNG files has the same three characters, JPEG files start with the value 0xF8 0xD8. The following URL lists various signatures of image file formats. http://www.garykessler.net/library/file_sigs.html
You can use a 3rd party library like jMimeMagic.
Also this link has a good comparison of various ways of getting the Mime type of a file (it includes libraries like: Apache Tika, JMimeMagic etc. with some code samples.)