I am trying to show an image from the server in my browser.I am following this link
http://balusc.blogspot.in/2007/04/imageservlet.html. i must say this is pretty well written and documented. I tried this and everything is working fine.
The problem is there when i am using ajax to display this image.the whole image seems to break into some codes inside the div.
i understand that the outputstream used in the code is writing directly to the page.But is it really not possible to handle that outputstream to somehow display the image in image tag of a jsp without having to create a different servlet.
Thank you for reading
You don't need to request image data via AJAX and then manipulate it yourself, in order to display it. Just use an <img> tag!
If /my_url is the location of your image, then
<img src="/my-url" alt="Appropriate description"/>
would do it. NOTE: /my-url doesn't have to be an actual image. It can be any resource (including a servlet) that returns image data with the appropriate MIME type set.
If you want to create the tag dynamically, you can use your favourite library, or do it iwth native JS:
var oImg=document.createElement("img");
oImg.setAttribute('src', '/my-url');
oImg.setAttribute('alt', 'Appropriate description');
oImg.setAttribute('height', imgHeight);
oImg.setAttribute('width', imgWidth);
document.body.appendChild(oImg);
Edit
If you want to be doing this server-side (and if so, is this really AJAX?), then you might want to look at the data uri scheme.
With this scheme, you can data directly to an image tag, without needing to provide it with an HTTP resource. To use this, you convert your outputstream to base64 and use the following:
<img src="data:image/png;base64,converted-data-stream-goes-here..." alt="Who needs HTTP?"/>
The image/png would change depending on the MIME type of your source data.
Read the linked Wikipedia page to fully understand the trade-offs here.
Just adding how i achieved a solution for it.
I referred to a new page(from the page i am submitting the form) through ajax and in the new page i used an image and through its src attribute i called the servlet method which is writing the image through its outputstream.
This way the servlet is writing my image to the new file which i can position anywhere.
Related
My current implementation is the following:
I store the image in binary data in the Database. Then I load it and send it as Base64 data in the Http Response.
API:
#Lob
#Column(length = 16777215)
private byte[] image;
Then load it in the UI <img ng-src="data:image/png;base64, {{product.image}}">
The HTTP Response is Huge for some images. It works well for a couple of images but let's say I want to display 100 images.
Is this the proper way to do it fast and well?
You could just try passing the URL to API in the image node. For example:
<img ng-src="https://api.myhost.com/product/5646/image" />
In most cases it should work just fine.
I don't believe there is a way around that, you're just transferring the size of the image to the HTML instead.
I would recommend against storing images in a database, the correct way to do it would be to store the images on the file system and store the URL within the database.
That should keep your HTTP response small and the HTML will load fast.
I have seen several examples of using a Servlet to dynamically generate a chart using JFreeChart, and subsequently including that image in a JSP using an img tag. For example:
<img src="/MyChartServlet" width="400" height="300" border="0" alt="" />
My servlet which generates the image using JFreeChart works great, and I can see the image if I call it directly in the browser as in:
http:/myurl/MyChartServlet?id=274
The problem is that my JSP does not display the image. In fact, the JSP is not even invoking the servlet. I know this because I do not see the debug entries in the log that appear when the servlet is called.
In the Servlet I am using the JFreeChart ChartUtilities.writeChartAsJPEG() method to write the image to the output stream of the response, because I do not want to write the image to disk. As mentioned the servlet works fine when called directly.
What am I missing? Or is there a better way to do this? Maybe a plain old object can generate the chart and I can include that in the JSP? Any help would be appreciated.
You're going about it the right way. You may be having some kind of relative path issue from the context you're in. Try
<img src="http://<full path to your servlet>" ...
Also, you have a ?id=274 in your example, but not in your img src. If that's required, put that in there as well.
If you posted your servlet code, that could help, but also make sure you have your content type set properly in your servlet
response.setContentType("image/jpeg");
I've created a form and I need the user to enter some info then upload a picture.
So lets say I have something like this:
<form method="post" enctype="multipart/form-data" action="some servlet/filter">
<input type="file" name="logo">
</form>
I need to use java to change that data to a byte[] then to blob so I can insert to a table.
How do I get the data from this form?
A bit of info on this:
I created the page using javascript, then when submitted it will call a java function to handle the data from the form. It seems that when I submit the form the data for the file is not passed over to the servlet.
So far the few methods I've tried have returned null and I'm outta ideas...
Any examples/help is greatly appreciated!
I think the main question I have is where is the file data stored before the java file start working on it? Is a special global variable holding the data or something like that?
You can use the Apache Commons FileUpload library.
The Commons FileUpload package makes it easy to add robust, high-performance, file upload capability to your servlets and web applications.
FileUpload parses HTTP requests which conform to RFC 1867, "Form-based File Upload in HTML". That is, if an HTTP request is submitted using the POST method, and with a content type of "multipart/form-data", then FileUpload can parse that request, and make the results available in a manner easily used by the caller.
If I understood you right, you need something similar to this example:
http://www.servletworld.com/servlet-tutorials/servlet-file-upload-example.html
I used the following tutorial one year ago:
http://balusc.blogspot.com/2009/12/uploading-files-in-servlet-30.html
It looks like it's a lot, but it's actually easy to understand, and it has a lot of good information.
HI all
I need to send an dynamically generated html to server using html form, html can be bigger size at present it is 1MB
I m sending an dynamical generated html to server using form hidden input field. at server side exception is : too large content..
The dynamically generated html is used to generate pdf and generated pdf will send back to browser in same request of response.
How to handle bigger size html which is generated dynamically.
Please help me out.
Thanks
kumar kasimala.
If you use asp.net you can do like below:
In Web.config file, add
<httpRuntime maxRequestLength="100000" executionTimeout="360"/>
under <system.web>
I googled a bit on your problem and hit upon this page which says that the post size is set by the server in its configuration and can be changed by resetting it - http://forums.sun.com/thread.jspa?threadID=5400480
If you use java:
Use servlet post method to transfer the data to the server
<form method="post" name="sample_form" action="/xxx">
....
</form>
Split it.
Try to split the content to multiple inputs. Your implementation might have problem with that... but that's not too probable
Split the content to multiple requests and send them with AJAX. Collect the responses and be sure to send it in the right order (not all requests at once). Last request should confirm it's the end and load a page returning the pdf
I want to create a component which can be used like:
<mc:chart data="#{bean.data}" width="200" height="300" />
where #{bean.data} returns a collection of some objects or chart model object or something else what can be represented as a chart (to put it simple, let's assume it returns a collection of integers).
I want this component to generate html like this:
<img src="someimg123.png" width="200" height="300"/>
The problem is that I have some method which can receive data and return image, like:
public RenderedImage getChartImage (Collection<Integer> data) { ... }
and I also have a component for drawing dynamic image:
<o:dynamicImage width="200" height="300" data="#{bean.readyChartImage}/>
This component generates html just as I need but it's parameter is array of bytes or RenderedImage i.e. it needs method in bean like this:
public RenderedImage getReadyChartImage () { ... }
So, one approach is to use propertyChangedListener on submit to set data (Collection<Integer>) for drawing chart and then use <o:dynamicImage /> component. But I'd like to create my own component which receives data and draws chart.
I'm using facelets but it's not so important indeed. Any ideas how to create the desired component?
P.S. One solution I was thinking about is not to use <o:dynamicImage/> and use some servlet to stream image. But I don't know how to implement that correctly and how to tie jsf component with servlet and how to save already built chart images (generating new same image for each request can cause performance problems imho) and so on..
P.S. One solution I was thinking about is not to use and use some servlet to stream image. But I don't know how to implement that correctly and how to tie jsf component with servlet and how to save already built chart images (generating new same image for each request can cause performance problems imho) and so on..
Just give it an URL as attribute so that it ends up as <img src="url"> and let that URL point to the servlet. Let the servlet generate/return the image based on the information provided by request parameters or pathinfo in the URL.
As to the caching, just store it somewhere in the disk file system or a DB by some unique identifier and let the servlet on every request check if it is there and handle accordingly.
For this all the standard <h:graphicImage> would be already sufficient. Just make the URL dynamic.