Могу ли я имитировать использование клавиши "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>
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>