CODEWITHSUNDEEP
javaimagegwtclient
SirAndrew00
SirAndrew00

Reputation: 45

How do I get generated Images from the Server to the Client using Gwt

Im working on an Web app using gwt and I generate a BufferedImg on the Serverside, which i want to be send to the Clientside. I have no Idea how to do that...

Upvotes: 1

Views: 2146

Answers (5)

Alicia
Alicia

Reputation: 174

To display static images stored on the server in a GWT client, simply do as follows:

  1. Store images in your GWT MyApp/war/images folder.

  2. Embed image name in an object text field. For example, if you have an object called 'Employee' with a bio field, embed text 'IMAGE: jane_doe.jpg'.

  3. Your objects should be downloaded to the client using jason (typically in your EntryPointImpl.onModuleLoad();

  4. Use regex to extract filename from text field.

  5. Set String path="images/"+filename.

  6. Create image object; e.g. Image img=new Image(path);

  7. Style and size as desired.

GWT will retrieve images using HTTP GET.

Upvotes: 0

istovatis
istovatis

Reputation: 1408

You can generate your image as a BufferedImage on your server side, and then pass it to client side with Remote Procedure Calls.

You have to implement:

  • Server side

    1. ImageServiceImpl class which extends RemoteServiceServlet at your server side. This class will genererate a BufferedImage:
      File imagePath = new File(url); BufferedImage image = ImageIO.read(imagePath); You will send this image to your client side.

  • Client side

    1. At you client side you have to create a synchronous ImageService interface, which extends RemoteService interface.

    2. You must also create another client interface, an asynchronous one,(ImageServiceAsync) based on your original service interface. As described in the GWT Project

      The nature of asynchronous method calls requires the caller to pass in a callback object that can be notified when an asynchronous call completes, since by definition the caller cannot be blocked until the call completes. For the same reason, asynchronous methods do not have return types; they generally return void. Should you wish to have more control over the state of a pending request, return Request instead. After an asynchronous call is made, all communication back to the caller is via the passed-in callback object.

Finally add your servlet to your web.xml

    <servlet>
  <servlet-name>ImageServiceImpl</servlet-name>
  <servlet-class>
    com.example.image.server.ImageServiceImpl
  </servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>ImageServiceImpl</servlet-name>
  <url-pattern>/com.example.image.Image/ImageService</url-pattern>
</servlet-mapping>

In order to send your image from server to client you have to follow 3 steps:

  1. Instantiate the service interface using GWT.create().

  2. Create an asynchronous callback object to be notified when the RPC has completed.

  3. Make the call.

These are generic rules to follow, I propose this not as a final solution to your problem, but as a guide in order to have an idea how RPC is defined and working. RPC is little complicated at the beginning, but as soon as you understand the mechanism, you will be able to pass a variety of data from your server to your client side.

[EDIT]

In case of Image type, have in mind that in GWT, HTML Images are loaded via the SRC attribute in an IMG element. Passing an image from server to client via RPCT cannot be done directly, but by using a tricK:

  1. Have the RPC call return a String of the image in Base 64.
  2. In the onSuccess() method, use that result String as the argument for setUrl() (which sets the SRC attribute).

Upvotes: 1

Cataclysm
Cataclysm

Reputation: 8558

I genearated my image as BufferedImage and transform it into ByteArrayOutputStream and return as follow..

public void downloadImage(final HttpServletRequest req,final HttpServletResponse res) throws Exception {
  File imagePathFile = new File(url);
  if (imagePathFile.exists()) {
  ByteArrayOutputStream baos = new ByteArrayOutputStream();
  BufferedImage image = ImageIO.read(imagePathFile);
  ImageIO.write(image, "jpg", baos);
        StringBuffer sbFilename = new StringBuffer();
        sbFilename.append("Image_");
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        sbFilename.append(sdf.format(new Date()));
        sbFilename.append(".jpg");

        StringBuffer sbContentDispValue = new StringBuffer();
        sbContentDispValue.append("inline");
        sbContentDispValue.append("; filename=");
        sbContentDispValue.append(sbFilename);

        res.setContentType("image/jpeg/jpg/png");
        res.addHeader("Cache-Control", "max-age=30");
        res.addHeader("Content-disposition", sbContentDispValue.toString());
        res.setContentLength(baos.size());
        ServletOutputStream os = res.getOutputStream();
        baos.writeTo(os);
        os.flush();
        os.close();
 }
}

Upvotes: 0

Olivier Tonglet
Olivier Tonglet

Reputation: 3502

You could use Base64 encoding to serialize your image and send it over the wire. You'll have to find a solution to decode it with GWT though. This might get you started How do I encode/decode short strings as Base64 using GWT?

Upvotes: 0

Fedy2
Fedy2

Reputation: 3207

You have to save the image as file in a "public" location and then on client side generate the URL to the image. Otherwise you can generate the image as servlet output for an HttpServlet.

You can't send the image to the client side directly.

Upvotes: 1

Related Questions