I have built inline visualforce page on a record, which takes certain field values and manipulates a div image.

The VF page also takes another Rich Text Area fields picture and adds that too.

Using HTML2Canvas I have a button which when pressed uploads the visualforce Div Image and the picture together to create a new image, and save into another rich text area.

Unfortunately when the new image is created, the picture is missing.

A second issue, which is that I cant seem to only select the parent div, just the entire canvas (body).


Strangely, when using an image stored as a static resource, HTML2CANVAS copies just fine. Unfortunately I cant store the images this way.

VF Page

<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,
            allowTaint: true,
            onrendered: function(canvas) {

    function callActionFunction(){

    border:5px solid black;


<apex:form id="theForm" >

<button id="theButton" 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 id="logo" class="logo">
        <apex:outputField value="{!product2.Product_Image_Logo__c}"/>



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;


Your Answer

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

Browse other questions tagged or ask your own question.