Get base64 of image from rich text field

Question

My question is about rendering image using its base64 instead of src attribute. I have a rich text field where users can attach images. I am displaying these images in a visualforce page. How can I render the images with base64 instead of regular src attribute?

Here's my apex code:

public List<SObject> getResults () {
    Id id = ApexPages.currentPage().getParameters().get('id');
    List<SObject> results = [SELECT Id, 
                                    Name,
                                    Screenshot__c
                                    FROM myCustomObject__c 
                                    WHERE parent__c = :id];
    return results;
}

And here's my visualforce:

<apex:repeat var="v" value="{! results }">
      <div class="styleclass">
          {! v.Name}
      </div>
      <h3>Screenshot</h3>
      <div class="styleclass">
          <apex:outputField value="{! v.Screenshot__c}"/>
      </div>
</apex:repeat>

The above visualforce snippet renders the images, giving me something like this:

<p><img src="https://mydomain.documentforce.com/servlet/rtaImage?eid=imageid&amp;feoid=someid&amp;refid=someid" alt="myimage.png"></img></p>

Instead of this, how can I get base64 of an image? Something like this:

<img alt="my image" src="data:image/png;base64,{base64dataofImage}/>

Appreciate your help on this!

Answer 1

Its better to save base64 encoded value of Screenshot__c field in new field created in myCustomObject__c object so that you can easily get encoded value and pass to visualforce page.

For encoding Screenshot__c use below code and do a mass update all records:

EncodingUtil.Base64Encode(myCustomObject__c.Screenshot__c);

After that update your query as

List<SObject> results = [SELECT Id, 
                                Name,
                                Screenshot__c,
                                Encoded_Screenshot__c //update field api name accordingly
                         FROM myCustomObject__c 
                         WHERE parent__c = :id];

Update visualforce code as

<img alt="my image" src="data:image/png;base64,{!v.Encoded_Screenshot__c}/>

Or another approach you can implement is store your screenshot__c as attachment for myCustomObject__c record and implement as discussed here.

Display Base64 data on a Visualforce page

Render blob image in visualforce page

---

Edit:

You cannot query attachment body field in join queries. You need another soql to get that.

List<SObject> results = [SELECT Id, 
                                    Name,
                                    Screenshot__c,
                                    (SELECT Id, Name FROM Attachments)
                             FROM myCustomObject__c 
                             WHERE parent__c = :id];

Get Attachments in separate query in a Map.

Map<ID, Attachment> attMap = [Select Id, Body, Parent.Type FROM Attachment WHERE Parent.Type = 'myCustomObject__c'];

In vf page:

{!attMap[v.Attachments[0].Id].Body}