El vídeo se combina con el lienzo para realizar la función de captura de pantalla de vídeo en línea

Déjame explicarte una pequeña demostración interesante que vi hace unos días: una captura de pantalla online del vídeo. Aquí está la representación después de modificar y agregar nuevas funciones:

¿No es genial? En realidad, es bastante simple. Te diré cómo hacerlo a continuación.

Se divide principalmente en tres funciones principales, la primera es la primera:

Utilice el objeto URL para obtener el enlace del vídeo y mostrarlo:

El objeto URL de js tiene un método createObjectURL, que puede obtener la URL de un archivo (objeto Archivo) y luego insertarla en el atributo src del elemento de video, para que se pueda mostrar el video. Por supuesto, hay varias formas de obtener el objeto Archivo, como usar elementos de entrada o arrastrar. Un fragmento de código completo:

 <tipo de entrada=archivo/>document.querySelector('entrada[tipo=archivo]').addEventListener('cambio',función () { document.querySelector('video').src = ventana.URL.createObjectURL(this. archivos[0])})

Por supuesto, no lo escribí así en el código fuente, solo para darte una demostración. Para un uso más específico de las URL, puedes leer este artículo o MDN.

El siguiente paso es el paso clave, pero también es muy simple, es decir, usar el método drawImage del lienzo. Si consulta la Sección 15.2.6 de Elevation 3, encontrará que el uso del método drawImage se describe en. Hay muchos detalles, pero falta uno, es decir, el elemento de video también se puede pasar al método drawImage y se pueden dibujar gráficos. Fragmento de código específico:

 var canvas = document.createElement(canvas);var canvasCtx = canvas.getContext(2d);var video=document.querySelector('video');// Sitúe las coordenadas de los ejes x, y y el tamaño de la imagen original, y la x de la imagen de destino, la etiqueta del eje y, el tamaño. canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);// Codifica el icono base64 en una cadena de URL var dataUrl = canvas.toDataURL(image/png);// Inserta la imagen en el atributo src document.createElement('img').src=dataUrl;

Después de dibujar la imagen, llame al método toDataURl de canvas para convertir la imagen en una URL codificada en base64, que se puede insertar en el elemento img para su visualización. Se completa la producción de una imagen en miniatura. Con respecto a la relación entre imágenes y base64, los estudiantes pueden leer este artículo.

El principio principal para implementar esta animación es: primero cree una imagen grande con el mismo tamaño que el video en el lugar original del video, configúrela en diseño absoluto (posición: absoluta), cree una imagen pequeña donde realmente se coloca la miniatura. y configúrelo como invisible (visibilidad: oculto), luego la imagen grande se desplaza hacia la izquierda y hacia arriba, y el ancho y el alto se reducen al lugar real donde se coloca la miniatura y se forma un efecto de animación. Finalmente, elimine la imagen grande y muestre la imagen pequeña. Fragmento de código específico:

 función getOffset(elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent; mientras (offsetParent) { pos.x += offsetParent.offsetLeft; .offsetTop; offsetParent = offsetParent.offsetParent;} retorno pos;}

Esta función es para obtener la distancia entre la imagen pequeña y la ventana gráfica (viewport) y proporcionársela a la imagen grande como parámetro de desplazamiento. La Sección 12.2.3 de Elevation 3 tiene un código casi idéntico, con instrucciones detalladas y la función alternativa getBoundingClientRect. También se mencionó, lea el libro para obtener más detalles.

El siguiente código es para crear imágenes grandes y pequeñas y lograr efectos de animación. Para mayor comodidad y facilidad de comprensión, uso JQuery aquí.

 var $imgBig = $(<img/>);//Establece la posición inicial de la imagen grande, que es el video original. $imgBig.css({ posición: absoluta, izquierda: video.offsetLeft, arriba: video.offsetTop, ancho: video.offsetWidth+ px, altura: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();// Obtenga el parámetro de distancia de la imagen pequeña para lograr el efecto de animación de la imagen grande. var offset = getOffset($img[0]);//Agregar efecto de animación $imgBig.animate({ izquierda: offset.x + px, arriba: offset.y + px, ancho: $img.width() + px, altura: $img.height() + px}, 500, función () { $img.show(); $imgBig.remove();});

Bueno, eso es todo para la parte del código principal. Por supuesto, todavía hay muchos problemas detallados en la implementación específica y otras funciones que pueden no mostrarse, por lo que no los explicaré uno por uno. Puede entrar en detalles después de leer. el código fuente.

A continuación se muestra la dirección de mi código fuente, puedes probarlo:

demostración en github

El anterior es el video combinado con el lienzo que el editor le presenta para realizar la función de captura de pantalla del video en línea. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!