Vi que a caixa de entrada de um determinado site suporta capturas de tela e função de pasta, e achei interessante, então desencadei o código e o compartilhei.
Infelizmente, apenas a versão superior do navegador Chrome suporta a colagem direta e outros navegadores não foram capazes de colar até agora (o IE11 não foi testado). Obviamente, essa função aprimorada de experiência do usuário é melhor que nenhuma.
O código da estrutura da caixa de entrada:
A cópia do código é a seguinte:
<input type = "text" id = "testInput" />
Vincular eventos de pasta para a caixa de entrada:
A cópia do código é a seguinte:
var input = document.getElementById ('testInput');
input.addeventListener ('pasta', função (evento) {
// doSomething ...
});
O objeto de interface de eventos para colar os eventos fornece uma interface do CLIPboardData, que salva os dados na área de transferência do sistema. Como mencionado acima, apenas versões mais altas dos navegadores do Chrome podem acessar diretamente os dados da área de transferência do sistema. Isso fornece uma entrada para as imagens salvas na área de transferência para interagir diretamente na página da web após a captura de tela.
A captura de tela mencionada aqui é a captura de tela fornecida pelo QQ ou a função de captura de tela da tecla PRTSCN fornecida pelo sistema, ou a função de captura de tela fornecida por outro software de terceiros.
A cópia do código é a seguinte:
input.addeventListener ('pasta', função (evento) {
// A interface para acessar o sistema de transferência do sistema adicionado ao objeto de evento
var clipboardData = event.clipboarddata,
i = 0,
itens, item, tipos;
if (clipboarddata) {
itens = clipboarddata.items;
if (! itens) {
retornar;
}
item = itens [0];
// Tipo de dados salvo na área de transferência
TIPOS = CLIPboardData.types || [];
para (; i <types.length; i ++) {
if (tipos [i] === 'arquivos') {
item = itens [i];
quebrar;
}
}
// determinar se são dados de imagem
if (item && item.kind === 'arquivo' && item.type.match (/^image /// i)) {
// Leia a foto
imGreader (item);
}
}
});
Depois de obter os dados da imagem da área de transferência, você pode usar o FileReader para lê -los.
A cópia do código é a seguinte:
var iMGreader = function (item) {
var arquivo = item.getasfile (),
leitor = new fileReader ();
// Depois de ler o arquivo, ele será exibido na página da web
leitor.onload = function (e) {
var iMg = new Image ();
img.src = e.target.result;
document.body.appendChild (IMG);
};
// Leia o arquivo
leitor.readasDataurl (arquivo);
};
O código muito curto é implementado, você pode usar o seguinte código -fonte para ver a demonstração.
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "en-us">
<head>
<meta charset = "utf-8">
<title> Use o CLIPboardData para implementar a captura de tela e colar funções em páginas da web </title>
<style type = "text/css">
#Box {Width: 200px; Altura: 200px; Fronteira: 1px sólido #DDD; }
</style>
</head>
<Body>
<H1> Use o CLIPboardData para implementar as funções de captura de tela e colar em páginas da web </h1>
<hr />
<div> <input type = "text" id = "testInput" placeholder = "Colar na caixa de entrada após a captura de tela" size = "30" /> </div>
<script type = "text/javascript">
(função(){
var iMGreader = function (item) {
var blob = item.getasfile (),
leitor = new fileReader ();
leitor.onload = function (e) {
var iMg = new Image ();
img.src = e.target.result;
document.body.appendChild (IMG);
};
leitor.readasdataurl (blob);
};
document.getElementById ('testInput') .addeventListener ('paste', função (e) {
var clipboardData = e.clipboarddata,
i = 0,
itens, item, tipos;
if (clipboarddata) {
itens = clipboarddata.items;
if (! itens) {
retornar;
}
item = itens [0];
TIPOS = CLIPboardData.types || [];
para (; i <types.length; i ++) {
if (tipos [i] === 'arquivos') {
item = itens [i];
quebrar;
}
}
if (item && item.kind === 'arquivo' && item.type.match (/^image /// i)) {
imGreader (item);
}
}
});
}) ();
</script>
</body>
</html>