I have an inline visualforce page on a record, which takes certain variables from the record and produces an image.

enter image description here

What I would like to do is to save the image into a rich text field on the same record.

I have been looking at HTML2Canvas to perform the save, however I have yet to see any examples where someone is saving back to a rich text field on the current record.

Is it possible to achieve this?


My solution:


<apex:page showHeader="false" standardController="product2" extensions="testSaveImageExtension">

<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<script type="text/javascript">
    window.onload = function(){
        html2canvas(document.body, {
            useCORS: true,
            onrendered: function(canvas) {
                document.getElementById("theDiv").style.display = 'none';

    function callActionFunction(){

    border:5px solid black;

<apex:form id="theForm" >

<button onclick="callActionFunction()">Attach Image</button>

<apex:actionFunction action="{!copyImage}" name="copyImage" rerender="theForm">
    <apex:param assignTo="{!strImageBlob}" name="imageBlob" value=""/>

<div id="theDiv" class="box"></div>



public with sharing class testSaveImageExtension {

    public String strImageBlob {get;set;}
    public Product2 currentRecord {get;set;}
    public String redirectUrl {get;set;}

    public testSaveImageExtension(ApexPages.StandardController controller) {

        currentRecord = [
            SELECT id,name,Product_Image__c
            FROM Product2 
            WHERE id = :ApexPages.CurrentPage().getparameters().get('ID')];
        redirectUrl = '/'+currentRecord.Id;


     public PageReference copyImage() {

        currentRecord.Product_Image__c = '<img src="'+ strImageBlob + '" >';
        update currentRecord;

     return null;

1 Answer 1


Once you have your image file (html2canvas should work just fine in Visualforce), preferably in base-64 encoded format, you just use normal HTML:

<img src="data:image/jpg;base64,imageDataShouldBeHere" />

Upon upload, the image will be saved as a file in Salesforce and can be viewed through the rich text editor. You can do this via apex:remoteObjects, apex:actionFunction, @RemoteAction, a hidden input field, etc.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .