O vídeo combina com a tela para realizar a função de captura de tela de vídeo online

Deixe-me explicar uma pequena demonstração interessante que vi há alguns dias: uma captura de tela online do vídeo. Aqui está a renderização depois de modificar e adicionar novos recursos:

Não é legal? Na verdade, é bem simples. Vou te contar como fazer isso abaixo.

Está dividido principalmente em três funções principais, a primeira é a primeira:

Use o objeto URL para obter o link do vídeo e exibi-lo:

O objeto URL de js possui um método createObjectURL, que pode obter a URL de um arquivo (objeto File) e depois inseri-la no atributo src do elemento video, para que o vídeo possa ser exibido. Claro, existem várias maneiras de obter o objeto Arquivo, como usar elementos de entrada ou arrastar. Um trecho de código completo:

 <input type=file/>document.querySelector('input[type=file]').addEventListener('change',function () { document.querySelector('video').src = window.URL.createObjectURL(this. arquivos[0])})

Claro, não escrevi assim no código-fonte, apenas para dar uma demonstração. Para um uso mais específico de URLs, você pode ler este artigo ou MDN.

O próximo passo é o passo principal, mas também é muito simples, ou seja, usando o método drawImage do canvas. Se você consultar a Seção 15.2.6 da Elevação 3, verá que o uso do método drawImage está descrito em. muito detalhado, mas falta um, ou seja, o elemento de vídeo também pode ser passado para o método drawImage e os gráficos podem ser desenhados. Trecho de código específico:

 var canvas = document.createElement(canvas);var canvasCtx = canvas.getContext(2d);var video=document.querySelector('video');//Define as coordenadas dos eixos x, y e o tamanho da imagem original, e o x da imagem de destino, rótulo do eixo y, tamanho. canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight); //Codifique o ícone base64 em uma string de URL var dataUrl = canvas.toDataURL(image/png);// Insira a imagem no atributo src document.createElement('img').src=dataUrl;

Depois de desenhar a imagem, chame o método toDataURl do canvas para transformar a imagem em uma URL codificada em base64, que pode ser inserida no elemento img para exibição. A produção de uma imagem em miniatura é concluída. Quanto à relação entre imagens e base64, os alunos podem ler este artigo.

O princípio principal da implementação desta animação é: primeiro crie uma imagem grande com o mesmo tamanho do vídeo na posição original do vídeo, defina-a para layout absoluto (posição:absoluta), crie uma imagem pequena onde a miniatura é realmente colocada e defina-o como invisível (visibilidade: oculto) e, em seguida, a imagem grande é deslocada para a esquerda e para cima, e a largura e a altura são reduzidas ao local real onde a miniatura é colocada e um efeito de animação é formado. Finalmente, exclua a imagem grande e exiba a imagem pequena. Trecho de código específico:

 função getOffset (elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent while (offsetParent) { pos.x += offsetParent.offsetLeft; .offsetTop; offsetParent = offsetParent.offsetParent } retornar posição;}

Esta função obtém a distância entre a imagem pequena e a janela de visualização (viewport) e a fornece à imagem grande como parâmetro de deslocamento. A Seção 12.2.3 da Elevação 3 possui um código quase idêntico, com instruções detalhadas e a função alternativa getBoundingClientRect. também foi mencionado, leia o livro para obter detalhes.

O código a seguir serve para criar imagens grandes e pequenas e obter efeitos de animação. Por conveniência e facilidade de entendimento, utilizo JQuery aqui

 var $imgBig = $(<img/>);//Define a posição inicial do quadro geral, que é o vídeo original. $imgBig.css({ posição: absoluta, esquerda: video.offsetLeft, topo: video.offsetTop, largura: video.offsetWidth+ px, altura: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();//Obtém o parâmetro de distância da imagem pequena para obter o efeito de animação da imagem grande. var offset = getOffset($img[0]);//Adicionar efeito de animação $imgBig.animate({ left: offset.x + px, top: offset.y + px, width: $img.width() + px, altura: $img.height() + px}, 500, função () { $img.show(); $imgBig.remove();});

Bem, a parte principal do código é isso. Claro, ainda há muitos problemas detalhados na implementação específica e outras funções que podem não ser mostradas, então não vou explicá-los um por um. o código-fonte.

Abaixo está o endereço do meu código-fonte, você pode tentar:

demonstração no github

O vídeo acima é combinado com a tela que o editor apresenta a você para realizar a função de captura de tela do vídeo online. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá em. tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!