На веб -сайте General Video может сделать скриншот видео, сыгранного пользователем, загруженным пользователем. Эта функция также может быть введена в проекте, чтобы дать пользователям хороший опыт, вместо того, чтобы позволить пользователям загружать дополнительную диаграмму отображения.
Карта эффекта:
Это все еще выглядит хорошо.
_canvas = document.createElement (Canvas); = _Canvas.todaurl (image/png);
Основным кодом является эти строки. Это ключевой момент.
Давайте посмотрим на весь пример:
HTML:
<! дисплей: Block; 5px; type = text/javascript src = ../../../jquery -.8.3.js> </script> <script type = text/javascript src = videoshot.js> </scri. Text/javascript> $ (function () {zhanghongyang.click2shot.init ();});И HTML, и CSS довольно просты.
Это в основном зависит от кода JS:
/ ** Создан с помощью Jetbrains Webstorm .click2shot = (function () {var _id_video = video; var _id_shotbar = hotbar; var _videowidth = 0; var _videoheight = 0; var_canvas = null; tx = null; var _video = null; function _init () {_canvas = документ. CreateElement (Canvas); ; ); _videoheight); : _video.offsetlect, top: _video.oftsettop, ширина: _videowidth + px, высота: _videowidth + px}). $ (<Img>); Эффект анимации $ imgbig.animate ({слева: официальный.x + px, top: Office.y + Px, ширина: $ img.width () + px, высота: $ img.height () + px}, 200, функция () {$ img.attr (src, datairl) .show (); x: (номер | номер), y: (номер | номер)} * @priving */ function_getoffset (ele m) {var pos = {x: elem.offsetleft, y: elem.offsettop}; ;Следует отметить, что после получения атрибутов и некоторых операций в видео. Нажав на инцидент, видео будет приостановлено, а в месте видео создается изображение.
После получения изображений вы можете добавить их самостоятельно. Существует также очень важный момент: Canvas.todataurl (Image/PNG); Проблема безопасности
Выше всего содержимое этой статьи.