一般的なビデオWebサイトでは、ユーザーがアップロードしたユーザーが再生するビデオのスクリーンショットを撮影できます。この関数は、ユーザーが追加の表示図をアップロードできるのではなく、ユーザーに優れたエクスペリエンスを提供するために、プロジェクトに導入することもできます。
効果マップ：
まだよさそうです。
_canvas = document.createlement（canvas.getContext（2d）; = _canvas.todaurl（image/png）;
コアコードはこれらの行です。CTX.Drawimageを使用する場合、最初のパラメーターはビデオオブジェクトになり、DataUrlはCanvasを介して取得され、IMGラベルに割り当てられます。それが重要なポイントです。
例全体を見てみましょう：
HTML：
<！doctype html> <html> </title> <meta charset = utf-8> <text/css> htmlディスプレイ：60px Auto 0; 5px; type = text/javascript src = ../../../jquery -.8.3.js> </script> <text/javascript src = videoshot.js> </scri text/javascript> $（function（）{zhanghongyang.click2shot.init（）;}）;HTMLとCSSの両方は非常に簡単です。
それは主にJSのコードに依存します：
/ ** JetBrains WebStorm：Zhy * 14-6-18 * .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（ CreateElement（Canvas）_Canvas.getContext（2d）; ）; ）; $ _id_shotbar）.click（_click2shot）; _Videoheight） _VIDEO.OFFSETELT、_VIDEO.OFFSETTOP、_VIDEOWIDTH + PX：_VIDEOWIDTH + PX}）。 $（<img>）;アニメーション効果$ imgbig.animate（{left：why whire.x + px、top：why.y + px、width：$ img.width（） + px、height：$ img.height（） + px}、200、function （）{$ img.attr（src、dataurl）.show（）; X ：（番号| number）、y：（number | number）} * @prive */ function_getoffset（ele m）{x：elem.offsetleft、y：elem.offsettop}; ;ビデオで属性といくつかの操作を取得した後、プレイイベントを取得した後、必ずremoventlinstenerを削除してください。そうしないと、この方法は常に呼び出されます。インシデントをクリックすると、ビデオが停止され、ビデオの位置に写真が生成されます。
写真を入手した後、自分で追加できます。また、非常に重要なポイントがあります。Todataurl（画像/PNG）。セキュリティの問題
上記は、この記事のすべての内容です。