0

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.

jinx
  • 5
  • 5
  • Is your site responsive? If not, doing so might fix this problem – Rani Giterman Apr 17 '22 at 07:25
  • yes the site is responsive, but the table is styled so at 500 width it goes into scroll mode, I suppose i should change the table CSS.. – jinx Apr 17 '22 at 07:35
  • Does this answer your question? https://stackoverflow.com/a/59841384/2358409 – uminder Apr 17 '22 at 07:39
  • @uminder the workaround given https://stackoverflow.com/questions/18012044/html2canvas-converting-overflowed-content-to-image helped me solve it.. thanks a lot – jinx Apr 17 '22 at 08:00

1 Answers1

0

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");       

   }
jinx
  • 5
  • 5