How to render png in http request?

Question

I have a controller hooked up to this method from a GET request:

def renderPNG() {
    URL url = new URL("https://absolute.url.png");
    BufferedImage img = ImageIO.read(url);
    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    ImageIO.write(img, "png", baos);
    InputStream is = new ByteArrayInputStream(baos.toByteArray());
    DataInputStream ds = new DataInputStream(is);

    render file: ds, contentType: "image/png"
}

But when I get the image in the response, it is encoded with strange characters. How do I retrieve the image and decode is properly so it can be rendered by a browser?

I think, at this point you just need to tell the browser that it's image byte. http://stackoverflow.com/questions/12041851/converting-bytes-to-an-image-for-drawing-on-a-html5-canvas — elixir, Sep 28 '16 at 22:55
You’ll likely need to send a content-type header: `Content-type: image/png` don’t know how to do that in this language though — Pekka, Sep 28 '16 at 23:03
try response.setContentType('image/png') response.outputStream << ds // not tested — elixir, Sep 28 '16 at 23:08
im already adding a content-type header... please read the snippet. — dopatraman, Sep 28 '16 at 23:34

score 0 · Answer 1 · answered Sep 29 '16 at 06:29

I have solve your problem by converting inputStream to Base64.encode getbyte code from that render it to the Veiw.

def renderPNG () {
 URL url = new URL("http://tineye.com/images/widgets/mona.jpg");
            BufferedImage img = ImageIO.read(url);
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(img, "png", baos);
            InputStream is = new  ByteArrayInputStream(baos.toByteArray()); 
      render(Base64.encode(is?.getBytes()))
}

Java script code fetch the image

 /* fetch the user image */
            $.ajax({
                url: "/controller/renderPNG",
                type: 'GET',
                cache: false,
                success: function (result) {
                    document.getElementById('userImage').src = "data:image/png;base64," + result;
                }
            });

HTML code where we want render the image

<div><img id="userImage" src=""alt="User Image"></div>

the response has to specifiy a content type – dopatraman Sep 29 '16 at 17:24 — dopatraman, Sep 29 '16 at 17:24

How to render png in http request?

1 Answers1