Situs web video umum dapat mengambil tangkapan layar video yang diputar oleh pengguna yang diunggah oleh pengguna. Fungsi ini juga dapat diperkenalkan dalam proyek untuk memberi pengguna pengalaman yang baik, daripada membiarkan pengguna mengunggah diagram tampilan tambahan.
Efek Peta:
Itu masih terlihat bagus.
_canvas = Document.createElement (Canvas); = _Canvas.todaurl (gambar/png);
Kode inti adalah baris ini. Saat menggunakan ctx.drawimage, parameter pertama dapat menjadi objek video, dan kemudian dataUrl diperoleh melalui kanvas dan ditugaskan ke label IMG. Itulah poin kuncinya.
Mari kita lihat seluruh contoh:
Html:
<! Tampilan: 60px auto 0;} #shotbar {posity: absolute; 5px; type = text/javascript src = ../../../jQuery -.8.3.js> </script> <script type = text/javascript src = videoshot.js> </scri. Text/JavaScript> $ (function () {zhanghongyang.click2shot.init ();});Baik HTML dan CSS cukup sederhana.
Itu terutama tergantung pada kode JS:
/ ** Dibuat dengan JetBrains Webstorm .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 () {{{document. createelement (canvas); _ctx = _canvas.getContext (2d); Eowidth ); _videoheight); : _video.Offsetlect, Top: _video.offsettop, lebar: _videowidth + px, tinggi: _videowidth + px}). $ (IMG>); efek animasi $ imgbig.animate ({left: official.x + px, atas: resmi.y + px, lebar: $ img.width () + px, tinggi: $ img.height () + px}, 200, fungsi () {$ img.attr (src, dataurl) .show (); x: (angka | angka), y: (angka | angka)} * @priving */ function_getoffset (ele m) {var pos = {x: elem.offsetleft, y: elem.offsettop}; ;Perlu dicatat bahwa setelah mendapatkan atribut dan beberapa operasi dalam acara Video. Saat mengklik kejadian itu, video akan ditangguhkan, dan kemudian gambar dihasilkan di lokasi video.
Setelah mendapatkan gambar, Anda dapat menambahkannya sendiri. Ada juga poin yang sangat penting: Canvas.todataurl (Image/PNG); masalah keamanan
Di atas adalah semua isi artikel ini.