I have created salesforce lightning application to take screenshot using javascript(html2canvas.js), but it will give me only background color not text.


<aura:application >
<!-- Js Script -->
<ltng:require scripts="{!$Resource.jqueryLatest + '/jquery-3.1.1.js'}" />
<ltng:require scripts="{!$Resource.CommunityResource + '/js/html2canvas.js'}" />
<ltng:require scripts="{!$Resource.CommunityResource + '/js/jquery.plugin.html2canvas.js'}" />

<div id="captureDiv"></div>
<div id="target">
    <p style="background:red; padding:10px; color:#fff; width:50%;" >
        Hi this is test app of print screen
<button onclick="{!c.myAction}">Print Screen</button>

Application Controller :

myAction : function(component, event, helper) {
    $('<p>Screensort</p><div id="screenshotcanvas"><canvas id="my_canvas_id" width="270" height="350"></canvas></div>').insertBefore($('#target'));
        onrendered: function (canvas) {
            //show image
            var myCanvas = document.getElementById('my_canvas_id');
            var ctx = myCanvas.getContext('2d');
            var img = new Image;
            img.onload = function(){
                ctx.drawImage(img,0,0,270,350); // Or at whatever offset you like
            console.log('img >> ', canvas.toDataURL());
            img.src = canvas.toDataURL();


Output :

enter image description here


Try to remove the < p >< /p > ,and put the text direcly inside the div and it will work.

  • 1
    please consider updating your answer with an explanation. As is, this would most likely be considered a comment. Thanks! – glls Jun 6 '17 at 13:10

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.