Сделать скриншот web страницы на javascript

← разместить еще код

screenshot js javascript web html2canvas. Чтобы сделать скриншот web страницы на javascript, нужно подключить плагин html2canvas, выполнить следующий код, указываем селектор блока, который надо заскринить, указать размеры, если надо. Cкрипт отправляет запрос на сервер, передавая ссылку на скриншот, дальше сохраняем файл на сервере и возвращаем его.

Расшаренный код:

<script>
    //сделать скриншот
    $('.get_report').click(function(){

        html2canvas($('.content_block'), //селектор, который надо заскринить
        {
            //размеры, если надо
            // width: 2500,
            // height: 500,
            onrendered: function (canvas) {
                document.body.appendChild(canvas);
                //после того, как сформировался канвас, копируем ссылку изображения и сохраняем файл
                screenShot();
            }
        });
    });


    //делаем скрин
    function screenShot()
    {
        var canvas = $('canvas')[0];
        var data = canvas.toDataURL('image/png').replace(/data:image\/png;base64,/, '');
        $('canvas').remove();
        $.post('file.php',{data:data}, function(rep){
             alert('Изображение '+rep+' сохранено' );
        });
    }
</script>

<?php
//file.php
$name = 'upload/screens/'.time().'.png';
file_put_contents($name, base64_decode($_POST['data'] ));
echo( $name );