Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Chris VogeChris Voge 

Display an image retrieved from a REST webservice

Hello,

I want to display a .TIF image retrieved from a REST web service. I do not want to have it downloaded.
The basic setup/flow is:
  • Call java service method that returns a .TIF image. Since I'm also updating the service, I'd like to know the ramifications between using @Produces({ "image/tif" }) and @Produces({ "application/octet-stream" }). I was also going to use 'Content-Disposition", "inline'
  • The above service would be called using an ActionFunction on the VF page and then the controller would call the service.
  • The result of the call would be a Blob object, which I would then convert to a Base64 encoded string to set on the controller.
  • The above ActionFunction would also have a rerender tag to rerender an image on the page with a data url and the Base64 string from the controller. 
      This is a little new to me, but does the above text sound like the correct direction to take ? Any guidance would be appreciated.

      Thanks, Chris
 
Martijn SchwarzerMartijn Schwarzer

Hi Chris,

I've faced the same challenge a few months ago. This is how I solved  it:

(this is a simplified example, you will have to fill in the details yourself)
 

public with sharing class ImageUrlController{
    public String imageUrl{get;set;}

    public void getImage(){
        //here you have your webservice call
        Http h = new Http();
        HttpRequest req = new HttpRequest();
        //set all needed attributes

        //It's all about handling the response
        HttpResponse res = http.send(req);

        //Here's where the magic happens. First get the response as a blob:
        Blob image = res.getBodyAsBlob();

        //Next set the image url. The type of image in my case is determined by the webservice response
        this.imageUrl = 'data:'+res.getHeader('Content-Type')+';base64,'+EncodingUtil.base64Encode(image);
    }
}
In my VisualForce page, I retrieve the image with the click of a button, but you could do the same with an actionfunction.
  
<apex:page controller="ImageUrlController">
  <apex:form id="myForm">
    <apex:pageBlock>

        <apex:pageBlockButtons>
            <apex:commandButton action="{!getImage}" value="Get Image" rerender="img" id="getImageButton"/>
        </apex:pageBlockButtons>

        <apex:outputPanel id="img" rendered="{!LEN(imageUrl) != 0}">
            <img src="{!imageUrl}"/>
        </apex:outputPanel>

    </apex:pageBlock>
  </apex:form>
</apex:page>

I hope this helps!

Happy coding!

Best regards,
Martijn Schwärzer
Chris VogeChris Voge
Martijn,

Thanks so much for your reply.

For the service you were calling, what was the content type of the
data being returned ? image/png ? application/octet-stream ?

Thanks again
Chris
Martijn SchwarzerMartijn Schwarzer
Hi Chris,

In my case it returned image/png.

Regards,
Martijn Schwärzer