Recentemente, para resolver o registro geral de informações anormais, o projeto estudou a função de captura de tela completa do navegador, para que os usuários possam capturar capturas de tela rapidamente e enviá -las ao administrador quando encontrarem anormalidades. As informações finais registradas no registro final são as seguintes.
Introdução ao html2CanvasNo passado, só podíamos interceptar imagens através de outras ferramentas de captura de tela. A função dos navegadores modernos tornou -se cada vez mais forte. Html2Canvas é um plugue frontal -nd -in, e seu princípio é desenhar o nó DOM na tela. Embora seja conveniente, existe o seguinte limite:
Como meu cenário de uso é simples, também é definido por mim mesmo, e a página anormal também é definida por mim, então o HTML2Canvas é suficiente.
Use instânciaQuote jQuery, html2Canvas podem ser usados e o código é simples. Eu uso a versão html2Canvas 0.5.0 aqui
Html2Canvas (#tbl_exception), {onrendered: function (canvas) {var url = canvas.todataurl (); pngto (corpo);O primeiro parâmetro é o objeto DOM para a captura de tela, e o segundo parâmetro é renderizado após a tela de recuperação.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| ALIMENTO | Booleano | Falso | Se deve permitir imagens de origem cruzada para manchar a tela |
| fundo | corda | #fff | Cor de fundo da tela, se nenhum for espalhado no DOM. |
| altura | número | nulo | Defina o Heigt da tela em pixels. |
| Renderização de cartas | Booleano | Falso | Se deve renderizar cada letra separadamente. |
| log | Booleano | Falso | Se deve registrar eventos no console. |
| Proxy | corda | indefinido | O URL para o projeto deve ser usado para carregar imagens de origem cruzada. |
| Tainttest | Booleano | verdadeiro | Se deve testar cada imagem se ela manchar a tela antes de desenhá -los |
| Tempo esgotado | número | 0 | O tempo limite para carregar imagens, em milissegundos. |
| largura | número | nulo | Defina a largura da tela em pixels. |
| Usecors | Booleano | Falso | Se deve tentar carregar imagens de origem cruzada como CORS Servad, antes de voltar ao proxyy |
Depois de apresentá -lo, quando você fala sobre os problemas que encontrou em seu uso, a captura de tela só pode interceptar o conteúdo na tela atual. Encontre uma solução depois de verificar o código -fonte do plugue e a depuração. Coloque o código -fonte e o código modificado abaixo
Código -fonte:
Retorne renderdocument (node.ownerdocume, opções, node.ownerdocument.defaultview.innerwidth, node.ownerdocumew.innerHeight, indecente). ) (Options.onRenderd está depreciado, o retorno html2Canvas, é promessa contendo a tela);
Modificar código:
// ! ) {log (options.onRended está depreciado, html2canvas retorna uma promessa contendo a tela);É principalmente para permitir que os usuários personalizem a largura e a altura do objeto DOM ao chamar o método de chamada é o seguinte
$ (#Btn_screen) .on (clique, function () {html2Canvas ($ (#tbl_exception), {altura: $ (#tbl_exception) .outerHeight () + 20, onrendered: fuins. (Canvas) {var url = Canvas. Todataurl (); [0] .Click (); ResumirAtravés do plug -in frontal, a função completa do navegador é implementada. Todo mundo está aprendendo.