Video wird mit Leinwand kombiniert, um eine Online-Video-Screenshot-Funktion zu realisieren

Lassen Sie mich Ihnen eine interessante kleine Demo erklären, die ich vor ein paar Tagen gesehen habe: einen Online-Screenshot des Videos. Hier ist das Rendering, nachdem ich Änderungen vorgenommen und neue Funktionen hinzugefügt habe:

Ist es nicht cool? Es ist eigentlich ganz einfach. Ich verrate dir unten, wie es geht.

Es ist hauptsächlich in drei Hauptfunktionen unterteilt, die erste ist die erste:

Verwenden Sie das URL-Objekt, um den Videolink abzurufen und anzuzeigen:

Das URL-Objekt von js verfügt über eine createObjectURL-Methode, mit der die URL einer Datei (Dateiobjekt) abgerufen und dann in das src-Attribut des Videoelements eingefügt werden kann, damit das Video angezeigt werden kann. Natürlich gibt es mehrere Möglichkeiten, das Dateiobjekt abzurufen, z. B. die Verwendung von Eingabeelementen oder das Ziehen. Ein vollständiger Codeausschnitt:

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

Natürlich habe ich es nicht so in den Quellcode geschrieben, nur um es Ihnen zu demonstrieren. Für eine spezifischere Verwendung von URLs können Sie diesen Artikel oder MDN lesen.

Der nächste Schritt ist der Schlüsselschritt, aber auch sehr einfach, nämlich die Verwendung der drawImage-Methode von Canvas. Wenn Sie Abschnitt 15.2.6 von Elevation 3 lesen, werden Sie feststellen, dass die Verwendung der drawImage-Methode in beschrieben ist Sehr detailliert, aber es fehlt. Das heißt, das Videoelement kann auch an die drawImage-Methode übergeben werden und Grafiken können gezeichnet werden. Spezifischer Codeausschnitt:

 var canvas = document.createElement(canvas);var canvasCtx = canvas.getContext(2d);var video=document.querySelector('video');//Setzen Sie die x-, y-Achsen-Koordinaten und die Größe des Originalbildes ein und das x des Zielbildes, die Y-Achsenbeschriftung und die Größe. canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//Codieren Sie das Base64-Symbol in einen URL-String var dataUrl = canvas.toDataURL(image/png);// Fügen Sie das Bild ein in das src-Attribut document.createElement('img').src=dataUrl;

Rufen Sie nach dem Zeichnen des Bildes die toDataURl-Methode von Canvas auf, um das Bild in eine Base64-codierte URL umzuwandeln, die zur Anzeige in das img-Element eingefügt werden kann. Die Erstellung eines Miniaturbildes ist abgeschlossen. In Bezug auf die Beziehung zwischen Bildern und Base64 können Schüler diesen Artikel lesen.

Das Hauptprinzip bei der Implementierung dieser Animation besteht darin, zunächst ein großes Bild mit der gleichen Größe wie das Video an der ursprünglichen Stelle des Videos zu erstellen, es auf absolutes Layout (Position: absolut) einzustellen und ein kleines Bild dort zu erstellen, wo das Miniaturbild tatsächlich platziert ist , und setzen Sie es auf unsichtbar (Sichtbarkeit: ausgeblendet), dann wird das große Bild nach links und oben verschoben, und Breite und Höhe werden auf die tatsächliche Stelle reduziert, an der das Miniaturbild platziert wird, und es entsteht ein Animationseffekt. Zum Schluss löschen Sie das große Bild und zeigen das kleine Bild an. Spezifischer Codeausschnitt:

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

Diese Funktion dient dazu, den Abstand zwischen dem kleinen Bild und dem Ansichtsfenster (Ansichtsfenster) zu ermitteln und ihn als Verschiebungsparameter für das große Bild bereitzustellen. Abschnitt 12.2.3 von Elevation 3 enthält einen nahezu identischen Code mit detaillierten Anweisungen und der alternativen Funktion getBoundingClientRect . Es wurde auch erwähnt, bitte lesen Sie das Buch für Details.

Der folgende Code dient zum Erstellen großer und kleiner Bilder sowie zum Erzielen von Animationseffekten. Der Einfachheit halber und zum leichteren Verständnis verwende ich hier JQuery

 var $imgBig = $(<img/>);//Legen Sie die Anfangsposition des Gesamtbildes fest, bei dem es sich um das Originalvideo handelt. $imgBig.css({ position: absolute, left: video.offsetLeft, top: video.offsetTop, width: video.offsetWidth+ px, height: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();// Rufen Sie den Abstandsparameter des kleinen Bildes ab, um den Animationseffekt des großen Bildes zu erzielen. var offset = getOffset($img[0]);//Animationseffekt hinzufügen $imgBig.animate({ left: offset.x + px, top: offset.y + px, width: $img.width() + px, height: $img.height() + px}, 500, function () { $img.show();});

Nun, das war's mit dem Hauptcodeteil. Natürlich gibt es noch viele detaillierte Probleme in der spezifischen Implementierung und anderen Funktionen, die möglicherweise nicht angezeigt werden, daher werde ich sie nicht einzeln erläutern. Sie können nach dem Lesen auf Details eingehen den Quellcode. Stellen Sie Fragen.

Unten ist meine Quellcode-Adresse, Sie können es ausprobieren:

Demo auf Github

Das obige ist das Video, das Ihnen der Redakteur in Kombination mit der Leinwand vorstellt, um die Online-Video-Screenshot-Funktion zu realisieren. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Redakteur wird Ihnen antworten Zeit. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!