Take Screenshot of html element for mobile view using JavaScript

Question

I started working with HTML2Canvas a few days ago and with some research, I managed to code a little script with which I can save a specific HTML div as a png. (I'm saving a table here)

The image I get from the desktop.

Desktop Screenshot

But the issue is, when I take the screenshot from mobile view, it shows the element as it is.

Mobile Screenshot

Now I know the canvas will paint the screen/div as displayed but I want to save the whole table instead of half scrolled. Is there any way to do this without changing the style of the table?

Code

    $(document).on('click', '#takePic', function(){
   html2canvas(document.getElementById("final_order"),{
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
        var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
        $.ajax({
        url: 'save-image.php',
        type: 'post',
        data: {action: "download",image: base64URL},
        success: function(data){
            alert("Success");
        }
        });
    });
});

Any assistance or guidance would be greatly appreciated.

Answer 1

There might be better ways to solve it but this is the one I used.

First remove Html table responsive class

document.getElementById('table-you-want-convert').classList.remove("table-responsive");       

Change html2canvas function to

html2canvas(document.getElementById("table-you-want-convert"),{
    windowHeight: window.outerHeight + window.innerHeight,
    windowWidth: window.outerWidth + window.innerWidth,
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
         //save or download image
         //add responsive class again
        document.getElementById('table-you-want-convert').classList.add("table-responsive");       

   }