Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Swamy P R NSwamy P R N 

How to take the screen shot of the page

Hello Every one,

When i click on a button in visualforce page, it has to capture the screenshot of the page and it has to send an email to some user. How can i achieve this?? I tried in different ways but strucked in some protions. Will you share your idea or any solution for this.

Thanks in advance !!
Best Answer chosen by Swamy P R N
RatanRatan
Check this out

Create a contoller that send an email with attachment.
We will decode the string using EncodingUtil.base64Decode then add into attachment body
and send email with that attachment.

  
public class sendEmailWithImage 
{
    public string strImageBlob {get;set;}
    
    public void sendEmail()
    {
        Messaging.SingleEmailMessage mail =  new Messaging.SingleEmailMessage();
        List<String> lstString = new List<String>();
        mail.setToAddresses(new String[]{'enter your email address'});
        mail.setSubject('Email found');
        Messaging.EmailFileAttachment attach = new Messaging.EmailFileAttachment();
        attach.setContentType('image/png');
        attach.setFileName('Test.png');
        attach.setInline(false);
        attach.Body = EncodingUtil.base64Decode(strImageBlob.replaceFirst('data:image/png;base64,',''));
        mail.setHtmlBody('Please find the attached Image');
        mail.setFileAttachments(new Messaging.EmailFileAttachment[] { attach });
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] {mail});
    }
}


In page onload on window we will create canvas image using html2canvas
then once page is load click on button this will send an email with attach image. 
<apex:page showHeader="false" controller="sendEmailWithImage">
    <apex:form id="frm">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    
    <div class="container" id="mapDiv">
      <div class="jumbotron">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p> 
      </div>
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>        
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>
    
    
    <button onclick="callActionFunction()">SendEmail</button>
    <apex:actionFunction action="{!sendEmail}" name="sendEmailAF" rerender="frm">
        <apex:param assignTo="{!strImageBlob}" name="imageBlob" value=""/>
    </apex:actionFunction>
    
    <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.body.appendChild(canvas);
                    document.getElementById("mapDiv").style.display = 'none';
                }
            });
        }
        //
        function callActionFunction()
        {
            sendEmailAF(document.getElementsByTagName('canvas')[0].toDataURL());
        }
       
   </script>
   </apex:form>
</apex:page>

If this solve you problem mark this as best answer to help others.

All Answers

RatanRatan
Hello,

You can use HTML2Canvas http://html2canvas.hertzen.com/

For Reference use this http://sforcedc.blogspot.in/2015/06/visualforce-page-screenshots-with.html


Try this.
Swamy P R NSwamy P R N
Hello Ratan, Thank you for sharing this. Along with this we have to send an email, i mean once we took the screenshot than we have to send this screenshot as an image to one of the user. How can i achieve this??

Thanks in advance!!
RatanRatan
Once you created canvas image.


onclick of button call a js function
  
function me()
   {
      var strURL = document.getElementsByTagName('canvas')[0].toDataURL();
      call action function.
   }

bind this strURl to a apex variable at controller side for this you can use apex function with parem

action function will call a method
  
public void test(){

  Messaging.SingleEmailMessage mail =  new Messaging.SingleEmailMessage();
List<String> lstString = new List<String>();
mail.setToAddresses(new String[]{'email address'});
mail.setInReplyTo('sl_managecaseemailservices@1kz9xrgxvig77xehrsq4duu3puip1c1r38wgk8t03f7mjdcqwr.9-vzoieaq.ap1.apex.salesforce.com') ;
mail.setSubject('No existing Case was found');

String body = '<img alt="Image" src="'+apex varible+'" /> ';
mail.setHtmlBody(body);
Messaging.sendEmail(new Messaging.SingleEmailMessage[] {mail});
}

try this....


 
Swamy P R NSwamy P R N
Hi Ratan,

Can you give a littile more idea on Visualroce page that how to add canvas tag and passing paramers in actiofunction.

Please suggest, with your valuable idea. Thanks in advance!!
RatanRatan
Check this out

Create a contoller that send an email with attachment.
We will decode the string using EncodingUtil.base64Decode then add into attachment body
and send email with that attachment.

  
public class sendEmailWithImage 
{
    public string strImageBlob {get;set;}
    
    public void sendEmail()
    {
        Messaging.SingleEmailMessage mail =  new Messaging.SingleEmailMessage();
        List<String> lstString = new List<String>();
        mail.setToAddresses(new String[]{'enter your email address'});
        mail.setSubject('Email found');
        Messaging.EmailFileAttachment attach = new Messaging.EmailFileAttachment();
        attach.setContentType('image/png');
        attach.setFileName('Test.png');
        attach.setInline(false);
        attach.Body = EncodingUtil.base64Decode(strImageBlob.replaceFirst('data:image/png;base64,',''));
        mail.setHtmlBody('Please find the attached Image');
        mail.setFileAttachments(new Messaging.EmailFileAttachment[] { attach });
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] {mail});
    }
}


In page onload on window we will create canvas image using html2canvas
then once page is load click on button this will send an email with attach image. 
<apex:page showHeader="false" controller="sendEmailWithImage">
    <apex:form id="frm">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    
    <div class="container" id="mapDiv">
      <div class="jumbotron">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p> 
      </div>
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>        
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>
    
    
    <button onclick="callActionFunction()">SendEmail</button>
    <apex:actionFunction action="{!sendEmail}" name="sendEmailAF" rerender="frm">
        <apex:param assignTo="{!strImageBlob}" name="imageBlob" value=""/>
    </apex:actionFunction>
    
    <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.body.appendChild(canvas);
                    document.getElementById("mapDiv").style.display = 'none';
                }
            });
        }
        //
        function callActionFunction()
        {
            sendEmailAF(document.getElementsByTagName('canvas')[0].toDataURL());
        }
       
   </script>
   </apex:form>
</apex:page>

If this solve you problem mark this as best answer to help others.
This was selected as the best answer
RatanRatan
Steps:

1. once page load. Canvas2HTML convert the page into a canvas image.
2. Onclick on button we get the canvas image DataURL and assign to controller variable strImageBlob.
3. And onclick of button we call controller method for sending email.
4. In this method we create image/png attachment.
5 In attachment  body we decode the canvas data and before that wwe replace the data:image/png;base64  with '' space else it wont decode.
6. After that we are sending email to specify email address with attach image.



 
Swamy P R NSwamy P R N
Thank you Ratan Paul.

Its working fine, Thank you very much for your help on this.

Regards,
Swamy
Swamy P R NSwamy P R N
Ratan,

I just want to know only one thing that is, am not able to see the radio buttons in the screenshot image. Please see the below image for better understanding. To show radio buttons as well, what we have to add because user has to know which one they selected by looking into that email.
User-added image
RatanRatan
Hello Swamy P R N,

Just use the updated html2Canvas.js file this will work with checkbox also.
  
<script src="//rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>



 
Swamy P R NSwamy P R N
Hello Ratan,

Atlast i just wanted to ask you onething i.e, If i commented that appendChild line, am not able to send an email to the users.
Internal team was not supposed to see the screeshot while sending. If i uncommented that line, than am able to send an emai to the users.

useCORS: true, onrendered: function(canvas) {
                  //      document.body.appendChild(canvas);
                 //       document.getElementById("mapDiv").style.display = 'none';
}

So while we are sending an email, Internal team people are not supposed to see that screenshot, only the users have to see the image which is in  thier email. How can i achieve this?? and also i just want to hide some part in that page.. how can i achieve these buddy, suggest me.

Thanks in advance!!
RatanRatan
Hi,

I am not sure but you can give a try.
I think instead of generating the canvas onload of page. generate canvas onclick on button and before generating the canvas you can hide the div using javascript.
Once canvas is genrated then you can call the apex function use apex function oncomplete attribute here..

Once email is sent after that you can call a javascript function from using oncomplete attribute.

In that javascript function you can hide the canvas.

let me know if this will work or not.

 
Swamy P R NSwamy P R N
Hi RatanPaul,

Actually it was resolved.
For hiding some components in the page, you have to pass the attribute:: <div data-html2canvas-ignore="true">
For hiding appended child in the page, you have to use below snippet of code in script.
                   {
                         document.body.appendChild(canvas); 
                          canvas.style.visibility = 'hidden';

                   },

Thanks for helping on this requirement, it is completed successfully. :) :) 
RatanRatan
Cool....
nidhi dewangan 12nidhi dewangan 12
hi ratan 

can u please tell me how to save screenshot in a object or folder.
 
Atul Hinge 23Atul Hinge 23
 Hi Ratan,
 I am trying to get screenshot of Rich Text Area Field which contains images.
 I got below error.
  
Access to Image at 'https://c.na15.content.force.com/servlet/rtaImage?eid=a1bi0000002k7Jt&feoid=00Ni000000I3QhO&refid=0EMi0000000QRZY' from origin 'https://c.na15.content.force.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://c.na15.visual.force.com' is therefore not allowed access.

I did CORS setting for this but still getting same issue.
please suggest me any solution.