HTML com base em uma captura de tela da implementação de tela

Lembro -me de ver um compartilhamento em todos antes, explicando soluções de captura de tela baseadas em JS. Então, desta vez, pretendo escrever uma idéia de compartilhar com todos. Esta é apenas uma pequena demonstração muito simples. De acordo com o endereço usual do código PO.

Renderizações

Pensamento geral

• Defina a chave de atalho de início/final
• Após o início, Dom é atraído pela tela para cobrir a interface DOM original
• Adicione uma área de captura de tela do mouse de simulação de tela
• Adicione uma tela para desenhar a interface do navegador correspondente à área de captura de tela do mouse (interceptada a partir da primeira tela)
• Salve a imagem interceptada

Como as teclas de atalho podem causar conflitos, as teclas de atalho não podem limitar o número de teclas de atalho, portanto a forma de uma matriz no primeiro parâmetro é passada.

 Screenshot da função (QuickstartKey, EndKey) {// Compatibilidade Considere não usar ... String estendida var keyLength = QuickStartKey.Length var WasKeyTrigger = {} var canshot = false ... Q UickStartKey. Arrays de parâmetros de travessia iskeyTrigger [Item] = false // Todas as teclas na matriz padrão não são acionadas}) $ ('html'). = = ENDKEY) {...} else if (! Cantstartshot) {isKeyTrigger [KeyCode] = true var nottrigger = object.keys (isKeyTrigger). a ser acionado}) se (nottrigger.length === 0) {// não existe uma chave de atalho que precisa ser acionada.

Se você adotar um método nativo, poderá consultar a introdução do DOM no MDN. O mais complicado é que você precisa criar um elemento envolvido em uma imagem SVG contendo XML. Como calcular o DOM exibido no navegador atual e o extrair é realmente o mais tedioso. De fato, o autor não tem uma boa idéia para implementar manualmente um =. =, Então eu escolhi esta biblioteca HTML2Canvas para concluir isso. O método de chamada geral é o seguinte:

 Function BeginShot (cantstartshot) {if (cantstartshot) {html2Canvas (document.body, {onRended: function (canvas) {// Obtenha a imagem de tela com a mesma interface})}}}}}

A realização deste local foi originária de usar o Canvasapi nativo, mas envolveu um problema nele. é excluído quando desencadeou o Mousemove. Para simular o processo de desenho de tempo real. O autor desamparado não encontrou o método de usar a API nativa da tela. Aqui, o autor usa uma biblioteca de lona baseada em JQ chamada Jcanvas. Isso atende às necessidades do autor, e a realização é a seguinte:

 $ ('#' +Canvasid) .MouseDown (function (e) {$ (# +Canvasid) .Removelayer (nome de camada) // exclua o nome da camada anterior += 1 startx = that._calculatingXy (e) .x // calcular a posição do mouse starty = that._calculatingxy (e) .y isShot = true $ (#+canvasid) .addlayer ({type: 'retângulo', // retangular ... nome: nome da camada, o nome da camada x: startx, y, y : Starty, largura: 1, altura: 1})}). = that._calculatingxy (e) .y var width = movex -startx var alting = movey -starty $ (#+canvasid) .addlayer ({type: 'retângulo', ... nome: Lay: Lay Ername, fromCenter: false: false: false: False , X: startx, y: starty, largura: largura, altura: altura}) $ (#+canvasid) .drayers ();

 var canvasResult = document.getElementById ('CanvasResult') var ctx = canvasResult.getContext (2D); , 0, 0, largura, altura) var dataurl = canvasResult.todataurl (imagem/png);

Entre eles, a imagem foi interceptada por drawimage e, em seguida, a imagem foi convertida em codificação base64 usando o método Todataurl

 Download da função (el, nome do arquivo, href) {el.attr ({'download': nome do arquivo, 'href': href})} ... downloadfile ($ ('. Ok'), 'screenshot' + math .random ( .Random () .Tring ().

Entre eles, o atributo de download da tag A pode ser baixado diretamente quando o usuário clicar.

 <script src = https: //cdn.bootcss.com/jquery/3.2.1/jqury.min.js> </script> <script src = https: //cdn.bootcss.com/jcanvas/16.7.3/ jcanvas.minmin.js> </script> <script src = https: //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </sCript>

 Captura de tela ([16, 65], 27) // Inicie a tecla de atalho definida para mudar+a;

O local mais repugnante do artigo (Dom escreve com lona e configuração de lona) usa duas bibliotecas para implementação, respectivamente. que ainda é um pouco. Essência

O acima é todo o conteúdo deste artigo.