The problem is that html2canvas takes a screenshot of the entire selector (in this case, the body), which is specified. And how to make it so that there is only a screenshot of the part of the page that is visible on the screen? If you specify the width and height corresponding to the size of the screen, you get a screenshot of the top of the page, the size of the screen. I hope that clearly stated the essence of the problem. Help :)

$("#scrShot").click(function(){ html2canvas($("body"), { //width: document.documentElement.clientWidth, //height: document.documentElement.clientHeight, onrendered: function(canvas) { var myImage = canvas.toDataURL(); window.open(myImage); } }); });

PS Ideally, this screenshot should be immediately opened on canvas for editing. But this is still minor.

    1 answer 1

    All figured out. In the new version of html2canvas, you can optionally set the scroll value (y: value) indicating the Y axis offset. As a result, just before executing the function, you need to get the value var scrollFromTop = window.pageYOffset, and then scroll the screen by the same value :

     html2canvas(document.body, { width:document.documentElement.clientWidth, height: document.documentElement.clientHeight+scrolledFromTop, y: scrollFromTop, }).then(function(canvas) { //некоторый код });