Can I simulate the use of the "print screen" key?

Question

Can I simulate the use of the "print screen" key?

Navigation

#1 by (0 votes)

1

I would like to know if I can simulate the use of the print screen key (the one we press to take screenshots) with the browser, either with JavaScript or PHP.

I have already used the html2canvas plugin, but the screenshot is distorted. This is the script that I used:

<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>

javascript jquery php

asked by Carlos Méndez 13.02.2018 в 20:59

source

1 answer

How to generate two whole Randoms in Java Python Recursion Tkinter

score 0 · Accepted Answer

Depends on what you want to say that the image is distorted.

First, if your container contains external images, you must pass the option useCors : true to HTML2Canvas. In some cases, if the image is hosted on a server that has a% co_of restrictive%, HTML2Canvas will not be able to load it.

Secondly, if your container contains SVG elements, it is very possible that HTML2Canvas renderee them wrong, because the CSS applied to an SVG is not completely standard and HTML2Canvas tends to distort the thickness of the lines (for example) and the size of the typographies. For those cases, you have to add inline styles to the elements Allow Origin and text (in the case of graphics generated with C3).

The following example does work, but I'm not using SVG elements.

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>