Могу ли я имитировать использование клавиши "print screen"?


хотел бы знать, могу ли я имитировать использование клавиши print screen (той, которую мы нажимаем, чтобы сделать скриншоты) с браузером, либо с JavaScript, либо с PHP.

я уже использовал плагин html2canvas, но снимок экрана искажается. Это скрипт, который я использовал:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<script type="text/javascript">
html2canvas(document.contenido_global, {
    onrendered (canvas) {
        var link = document.getElementById('download');
        var image = canvas.toDataURL();
        link.href = image;
        link.download = 'screenshot.png';
    }
});
</script>
Author: Alvaro Montoro, 2018-02-13

1 answers

Зависит от того, что вы подразумеваете под искажением изображения.

Во-первых, если ваш контейнер содержит внешние изображения, вы должны передать HTML2Canvas опцию useCors : true. В некоторых случаях, если изображение размещено на сервере с ограничительным Allow Origin, HTML2Canvas не сможет его загрузить.

Во-вторых, если ваш контейнер содержит элементы SVG, вполне возможно, что HTML2Canvas визуализирует их неправильно, потому что CSS, применяемый к SVG, не является полностью стандартным, а HTML2Canvas он имеет тенденцию искажать толщину линий (например) и размер шрифтов. В этих случаях вы должны добавить встроенные стили к элементам text и path (в случае диаграмм, сгенерированных с помощью C3).

Следующий пример работает, но я не использую элементы SVG.

html2canvas(document.getElementById('contenido_global'), {
    useCORS: true,
    onrendered (canvas) {
        var link = document.getElementById('download');
        var image = canvas.toDataURL();
        link.href = image;
        link.download = 'screenshot.png';
    }
});
#contenido_global {
background:white;
border:2px solid red;
padding:3px;
margin:3px auto;
width:330px;

}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<a id="download">Descargar</a>

<div id="contenido_global">

Hola Soy el contenido global
<br>
<img src="http://1.bp.blogspot.com/-TIPXtgKPnKA/T2wQ1vkrhII/AAAAAAAAGJs/TKfNJT4MIbM/s320/Cat-01.jpg">
</div>
 0
Author: ffflabs, 2018-02-14 13:07:05