Is there a way to get a screenshot of the block (for example, there is a certain div on the page) only through the code?

There are libraries that take screenshots when the browser is running. But I need to get a picture by sending a request from the server. That is something that will run the code as if in a browser and make a screenshot.

I have a link to the document https://site.ru/files/index.html

And the selector. .div_block_preview

Having this data, how can I get a preview image on the server? (it is desirable to choose another type of browser)

  • one
    Updated the question to a more specific. - manking

2 answers 2

You can do something similar by analogy with this code.

$(".drag").draggable(); $(".drag").droppable(); var takeScreenShot = function() { html2canvas(document.getElementById("container"), { onrendered: function (canvas) { var tempcanvas=document.createElement('canvas'); tempcanvas.width=350; tempcanvas.height=350; var context=tempcanvas.getContext('2d'); context.drawImage(canvas,112,0,288,200,0,0,350,350); var link=document.createElement("a"); link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS link.download = 'screenshot.jpg'; link.click(); } }); } 
 #container{ width:400px; height:200px; } #rightcontainer{ width:300px; height:200px; background:gray; color:#fff; margin-left:110px; padding:10px; } #leftmenu{ color:#fff; background-color:green; width:100px; height:200px; position:fixed; left:0; padding:10px; } button{ display:block; height:20px; margin-top:10px; margin-bottom:10px; } .drag{ width:40px; height:20px; background-color:blue; z-index:100000; margin-top:10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <button onclick="takeScreenShot()">Snapshot</button> <div id="container"> <div id="leftmenu"> Left Side <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> Drag-----------> & Click Snapshot </div> <div id="rightcontainer"> Right Side </div> </div>

    You can try phantomjs . The code is about the following.

     var page = require('webpage').create(); page.open("url", function(status) { if (status !== 'success') { console.log('Unable to load the address!'); } else { window.setTimeout(function () { //Heres the actual difference from your code... var bb = page.evaluate(function () { return document.getElementsByClassName("span7 demo")[0].getBoundingClientRect(); }); page.clipRect = { top: bb.top, left: bb.left, width: bb.width, height: bb.height }; page.render('capture.png'); phantom.exit(); }, 200); } });
    • How to install this phantomjs webpage? In npm, this is a completely different webpage module. - manking
    • The code does not work. - manking
    • They have a ready-made example on their website. Github.com/ariya/phantomjs/blob/master/examples/rasterize.js - luk-alex
    • Error and there and there. return decorateNewPage (opts, phantom.createWebPage ()); ^ ReferenceError: phantom is not defined - manking
    • Where to connect the phantom itself? - manking