Die allgemeine Video -Website kann einen Screenshot des von dem Benutzer hochgeladenen Videos aufnehmen. Diese Funktion kann auch in das Projekt eingeführt werden, um den Benutzern eine gute Erfahrung zu bieten, anstatt den Benutzern ein zusätzliches Anzeigediagramm hochzuladen.
Effektkarte:
Es sieht immer noch gut aus.
_canvas = document.createelement (canvas); = _Canvas.todaurl (Bild/png);
Der Kerncode ist diese Zeilen. Das ist der Schlüsselpunkt.
Schauen wir uns das ganze Beispiel an:
HTML:
<! Anzeige: 60px 0; 5px; type = text/javaScript src = ../../../jquery -.8.3.js> </script> <script type = text/javaScript src = videoshot.js> </scri. Text/javaScript> $ (function () {zhanghongyang.click2shot.init ();});Sowohl HTML als auch CSS sind recht einfach.
Es hängt hauptsächlich vom Code von JS ab:
/ ** * Mit JetBrains Webstorming .click2shot = (function () {var _id_video = video; var _id_shotbar = Shotbar; var _videowidth = 0; var _videoheight = 0; VAR_CANVAS = Null; tx = null; var _video = null; function _init () {_canvas = document. CreateLement (Canvas); Owidth ); _videoHeight); : _video.offsetLect, oben: _video.offsettop, width: _videowidth + px, Höhe: _videowidth + px}). $ (IMg>); Animationseffekt $ imgbig.animate ({links: offiziell.x + px, ober: offiziell () {$ img.attr (src, dataurl) .show (); x: (number | number), y: (number | number)} * @priving */ function_getoffset (ele m) {var pos = {x: elem.offsetleft, y: elem.offsettop}; ;Es ist zu beachten, dass nach dem Erhalten der Attribute und einige Operationen im Video -Ereignis die Ereignis von REMEVENTLINSTENER ansonsten immer aufgerufen wird. Wenn Sie auf den Vorfall klicken, wird das Video suspendiert, und dann wird ein Bild in der Position des Videos generiert.
Nachdem Sie Bilder erhalten haben, können Sie es selbst hinzufügen. Es gibt auch einen sehr wichtigen Punkt: Canvas.Todataurl (Image/PNG). Sicherheitsproblem
Das oben genannte ist der Inhalt dieses Artikels.