Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I am having the Base 64-encoded binary data and i want to render that as image on visualforce page. is that possible? any tips?

Thanks

share|improve this question

3 Answers 3

What format is the image in? Assuming it's a png file you could do the following:

<img src="data:image/png;base64,<<base 64 data here>>"/>

The tricky part though, is that you won't bre able to next an <apex:outputText> inside there without getting errors from the compiler.

It's a little hacky, but you can assign that string to a variable:

<script type="text/javascript">

  var theImage = "<apex:outputText value='{!theBlob}'/>";

And then assign the full string to the src property of the img element (using jQuery here):

jQuery(function(){
    jQuery("#theImage").attr("src", "data:image/png;base64," + theImage);
});

This code has just been written in browser so is untested, but it should help you get to your solution.

share|improve this answer

This is a really interesting question which showcases some powerful (though not necessarily recommended) platform capabilities. To answer it:

BlobController.cls

public class BlobController {
  public String getData() {
    return
      'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAzklEQVQ4y2P4//8/AyWYgWoGwMEFBi0g' +
      'XgLEb4H4FxD/BuLXQNwHxPwwZdgNuMDgDcS3GR4w7Gf4yfCE4T8UgtggsQsMH4DYHrsBFxiUgfgVw1eG' +
      'm3CN6BAkd4HhGhArYTNgDtiW/wQgxCVTsBnwCcXZuCBIzQWGB9gM+EdQMwxeYPiGzYD/JBjwFZsBz0jw' +
      'wh1sBswiIRAbsBkgDsTviIjGpyC1uBKSJRBfx5OQLgOxLu6UCDFEEYh7oQnmCyjEgfgeELcAsSzOpDxg' +
      'uREA1co5dU5YrgAAAAAASUVORK5CYII='
    ;
  }
}

Blob.page

<apex:page controller="BlobController">
    <apex:image value="data:image;base64,{!Data}" />
</apex:page>

Base64 data to image

Genericizing this with a component:

Potentially, this could be used (eg) to minimize HTTP requests in overhead-critical applications such as mobile clients. Without the need for a build process. This use of PageReference.getContent may be contentious, and you'd need to consume SOQL queries to properly surface the MIME types, but this works for example's sake:

DataUriForResourceController.cls

public class DataUriForResourceController {
  public String path {
    get; set;
  }

  public String getData() {
    return EncodingUtil.base64encode(new PageReference(this.path).getContent());
  }
}

dataUriForResource.component

<apex:component layout="none" selfClosing="true" controller="DataUriForResourceController"><!--
--><apex:attribute required="true" name="path" type="String" description="Path for the static resource whose content will be fetched, eg '/resource/myResourceNameZip/file.ext'" assignTo="{!path}" /><!--
-->data:image;base64,<apex:outputText value="{!Data}" escape="false" /><!--
--></apex:component>

Usage:

JustInTimeCss.page

<apex:page contentType="text/css" cache="true" expires="300">
  div.panel {
    border:1px solid #CCC;
    background-image: url('<c:dataUriForResource path="{!URLFOR($Resource.myPng)}" />');
    padding:10px;
    margin:10px;
  }
</apex:page>
share|improve this answer
    
i've tried this out for similar kind of scenarios, and was successful to display the encoded signature in the visualforce page, but it is not working if the page is rendered as pdf. Please help me out –  SFDC_GEEK Aug 10 at 17:02

See EncodingUtil for swapping between Base64 and Binary. You could probably set the entire body of the VF page to the binary/blob version and then set the ContentType of the page component to the appropriate mime-type.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.