Vi que el cuadro de entrada de un determinado sitio web admite la función de captura de pantalla y pegar, y lo encontré interesante, así que desaqué el código y lo compartí.
Desafortunadamente, solo la versión más alta del navegador Chrome admite el pastoreo directo, y otros navegadores no han podido pegar hasta ahora (es decir, no se ha probado). Por supuesto, esta función mejorada de experiencia del usuario es mejor que ninguna.
El código de estructura del cuadro de entrada:
La copia del código es la siguiente:
<input type = "text" id = "testInput" />
Atar eventos de pegar para el cuadro de entrada:
La copia del código es la siguiente:
var input = document.getElementById ('testInput');
input.AdDeventListener ('Paste', function (Event) {
// Dosomething ...
});
El objeto de interfaz de eventos para eventos de pegado proporciona una interfaz PortboardData, que guarda los datos en el portapapeles del sistema. Como se mencionó anteriormente, solo las versiones más altas de los navegadores Chrome pueden acceder directamente a los datos del portapapeles del sistema. Esto proporciona una entrada para las imágenes guardadas en el portapapeles para interactuar directamente en la página web después de la captura de pantalla.
La captura de pantalla mencionada aquí es la captura de pantalla proporcionada por QQ o la función de captura de pantalla de la tecla PRTSCN proporcionada por el sistema, o la función de captura de pantalla proporcionada por otro software de terceros.
La copia del código es la siguiente:
input.AdDeventListener ('Paste', function (Event) {
// La interfaz para acceder al portapapeles del sistema agregado al objeto de eventos
var portapoarddata = event.clipboarddata,
i = 0,
elementos, elementos, tipos;
if (portapoarddata) {
elementos = clipboarddata.Items;
if (! elementos) {
devolver;
}
elemento = elementos [0];
// Tipo de datos guardado en el portapapeles
tipos = PapboardData.Types || [];
para (; i <tipos.length; i ++) {
if (tipos [i] === 'archivos') {
elemento = elementos [i];
romper;
}
}
// Determinar si se trata de datos de imágenes
if (item && item.kind === 'file' && item.type.match (/^image /// i)) {
// Lee la imagen
imgreader (elemento);
}
}
});
Después de obtener los datos de la imagen del portapapeles, puede usar FileReader para leerlos.
La copia del código es la siguiente:
var imgreader = function (elemento) {
VAR file = item.getAsfile (),
lector = new FileReader ();
// Después de leer el archivo, se mostrará en la página web
Reader.onload = function (e) {
var img = nueva imagen ();
img.src = e.target.result;
document.body.appendChild (IMG);
};
// Lee el archivo
lector.readasdataurl (archivo);
};
Se implementa el código muy corto, puede usar el siguiente código fuente para ver la demostración.
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en-us">
<Evista>
<meta charset = "utf-8">
<title> Use PapboardData para implementar la captura de pantalla y pegar funciones en las páginas web </title>
<style type = "text/css">
#box {ancho: 200px; Altura: 200px; borde: 1px sólido #ddd; }
</style>
</ablo>
<Body>
<H1> Use PapboardData para implementar capturas de pantalla y pegar funciones en páginas web </h1>
<hr />
<div> <input type = "text" id = "testInput" PlaceHolder = "Pegar en el cuadro de entrada después de la captura de pantalla" size = "30" /> </div>
<script type = "text/javaScript">
(función(){
var imgreader = function (elemento) {
var blob = item.getAsfile (),
lector = new FileReader ();
Reader.onload = function (e) {
var img = nueva imagen ();
img.src = e.target.result;
document.body.appendChild (IMG);
};
lector.readasdataurl (blob);
};
document.getElementById ('testInput') .adDeventListener ('Paste', function (e) {
var portapoarddata = e.clipboarddata,
i = 0,
elementos, elementos, tipos;
if (portapoarddata) {
elementos = clipboarddata.Items;
if (! elementos) {
devolver;
}
elemento = elementos [0];
tipos = PapboardData.Types || [];
para (; i <tipos.length; i ++) {
if (tipos [i] === 'archivos') {
elemento = elementos [i];
romper;
}
}
if (item && item.kind === 'file' && item.type.match (/^image /// i)) {
imgreader (elemento);
}
}
});
}) ();
</script>
</body>
</html>