Im trying to capture a div that's contained in a lightning component, using Html2canvas, but im getting an error.

This is my component :

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="VM_VFC_ComparisonController">
    <ltng:require styles="/resource/VM_SLDS/assets/styles/salesforce-lightning-design-system-ltng.min.css" scripts="/resource/jquery,/resource/html2canvas"/> 

    <div id="ComparisonPage">        
        Elements to screenshot 

and this is the controller code :

    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();
  • 1
    I don't any html element with id my_canvas_id. Is it supposed to be rendered in the ComparisonPage div? – Martin Lezer Jun 5 '17 at 15:43
  • 1
    Also you do not need to include slds in the styles=... – Itai Shmida Jun 6 '17 at 5:14
  • And, what is the error you're getting? – SE_User Jun 6 '17 at 8:22
  • I have an element with the id my_canvas_id I just wanted to show only the concerned code. – Maryem Bourhi Jun 6 '17 at 10:56
  • 1
    The error im getting is in this line of the html2canvas javascript file : documentClone.open(); it says that the document is undefined, i know that in lightning we cannot access the document but i don't know how to replace it – Maryem Bourhi Jun 6 '17 at 10:58

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.