I have created salesforce lightning application to take screenshot using javascript(html2canvas.js), but it will give me only background color not text.
Apllication:
<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
</p>
</div>
<button onclick="{!c.myAction}">Print Screen</button>
Application Controller :
({
myAction : function(component, event, helper) {
debugger;
$('<p>Screensort</p><div id="screenshotcanvas"><canvas id="my_canvas_id" width="270" height="350"></canvas></div>').insertBefore($('#target'));
html2canvas(document.getElementById('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 :