La vidéo se combine avec le canevas pour réaliser une fonction de capture d'écran vidéo en ligne

Laissez-moi vous expliquer une petite démo intéressante que j'ai vue il y a quelques jours : une capture d'écran en ligne de la vidéo. Voici le rendu après modification et ajout de nouvelles fonctionnalités :

N'est-ce pas cool ? C'est en fait assez simple, je vais vous expliquer comment procéder ci-dessous.

Il se divise principalement en trois grandes fonctions, la première est la première :

Utilisez l'objet URL pour obtenir le lien vidéo et l'afficher :

L'objet URL de js possède une méthode createObjectURL, qui peut obtenir l'URL d'un fichier (objet File) puis l'insérer dans l'attribut src de l'élément vidéo, afin que la vidéo puisse être affichée. Bien sûr, il existe plusieurs façons d'obtenir l'objet File, par exemple en utilisant des éléments d'entrée ou en le faisant glisser. Un extrait de code complet :

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

Bien sûr, je ne l'ai pas écrit ainsi dans le code source, juste pour vous faire une démonstration. Pour une utilisation plus spécifique des URL, vous pouvez lire cet article ou MDN.

L'étape suivante est l'étape clé, mais elle est également très simple, c'est-à-dire utiliser la méthode drawImage de canvas. Si vous consultez la section 15.2.6 d'Elevation 3, vous constaterez que l'utilisation de la méthode drawImage est décrite dans. très détaillé, mais il est manqué Un, c'est-à-dire que l'élément vidéo peut également être transmis à la méthode drawImage et que des graphiques peuvent être dessinés. Extrait de code spécifique :

 var canvas = document.createElement(canvas);var canvasCtx = canvas.getContext(2d);var video=document.querySelector('video');//Définissez les coordonnées des axes x, y et la taille de l'image d'origine, ainsi que x de l'image cible, étiquette de l'axe y, taille. canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//Encoder l'icône base64 dans une chaîne d'url var dataUrl = canvas.toDataURL(image/png);// Insérer l'image dans l'attribut src document.createElement('img').src=dataUrl;

Après avoir dessiné l'image, appelez la méthode toDataURl de canvas pour transformer l'image en une URL codée en base64, qui peut être insérée dans l'élément img pour l'affichage. La production d'une image miniature est terminée. Concernant la relation entre les images et base64, les étudiants peuvent lire cet article.

Le principe principal de la mise en œuvre de cette animation est le suivant : créez d'abord une grande image de la même taille que la vidéo dans la position d'origine de la vidéo, réglez-la sur une disposition absolue (position : absolue), créez une petite image où la vignette est réellement placée. , et définissez-le sur invisible (visibilité : caché), puis la grande image est déplacée vers la gauche et le haut, et la largeur et la hauteur sont réduites à l'endroit réel où la vignette est placée, et un effet d'animation est formé. Enfin, supprimez la grande image et affichez la petite image. Extrait de code spécifique :

 function getOffset(elem) { var pos = {x : elem.offsetLeft, y : elem.offsetTop}; var offsetParent = elem.offsetParent; while (offsetParent) { pos.x += offsetParent.offsetLeft; .offsetTop; offsetParent = offsetParent.offsetParent; } return pos;}

Cette fonction obtient la distance entre la petite image et la fenêtre (viewport) et la fournit à la grande image en tant que paramètre de déplacement. La section 12.2.3 d'Elevation 3 a un code presque identique, avec des instructions détaillées et la fonction alternative getBoundingClientRect. a également été mentionné, veuillez lire le livre pour plus de détails.

Le code suivant permet de créer de grandes images et de petites images et d'obtenir des effets d'animation. Pour plus de commodité et de facilité de compréhension, j'utilise JQuery ici

 var $imgBig = $(<img/>);//Définit la position initiale de la grande image, qui est la vidéo originale. $imgBig.css({ position : absolue, gauche : video.offsetLeft, haut : video.offsetTop, largeur : video.offsetWidth+ px, hauteur : video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();//Obtenir le paramètre de distance de la petite image pour obtenir l'effet d'animation de la grande image. var offset = getOffset($img[0]);//Ajouter un effet d'animation $imgBig.animate({ gauche : offset.x + px, haut : offset.y + px, largeur : $img.width() + px, hauteur : $img.height() + px}, 500, function () { $img.show(); $imgBig.remove();});

Eh bien, c'est tout pour la partie principale du code. Bien sûr, il existe encore de nombreux problèmes détaillés dans l'implémentation spécifique et d'autres fonctions qui peuvent ne pas être affichés, je ne les expliquerai donc pas un par un. Vous pourrez entrer dans les détails après avoir lu. le code source. Posez des questions.

Ci-dessous l'adresse de mon code source, vous pouvez l'essayer :

démo sur github

Ce qui précède est la vidéo combinée au canevas que l'éditeur vous présente pour réaliser la fonction de capture d'écran vidéo en ligne. J'espère qu'elle vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra. temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !