Скриншот html блока программно?

244

31 марта 2018, 18:11

Есть ли способ получить скриншот блока (например на странице есть определенный div) только через код?

Есть библиотеки которые делают скриншоты когда запущен браузер. Но мне нужно получить картинку отправляя запрос с сервера. То есть что то что запустит код как будто в браузере и сделает скриншот.

У меня есть ссылка на документ https://site.ru/files/index.html

И селектор. .div_block_preview

Вот имея эти данные как мне получить картинку предпросмотра на сервере? (желательно выбирать еще вид браузера)

Answer 1

Можешь сделать что то подобное по аналогии с этим кодом

$(".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>

Answer 2

Можно попробовать воспользоваться phantomjs. Код примерно следующий.

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Работа с iframe в js

Есть загрузка страницы через iframe

241

javascript

For item in data

Редко работаю с JS, но вот пришлось и неожиданно для себя обнаружил очень странное (на мой взгляд) поведение стандартных цикловТ

216

javascript

Мне нужен Node.JS хостинг! [требует правки]

я не разбираюсь вобще, что такое vps не понимаю, мне желательно нужен хостинг на русском языке, чтобы я просто загрузил сайт и он там сразу работалну...

232

javascript

Фокус при клике на кнопку которая открывает input

Как сделать фокус на input, который сначала скрыт,но по клику на кнопке открывается ? Атрибут autofocus срабатывает только первый раз, а 'nativeElement'...

248