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;

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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