Video digabungkan dengan kanvas untuk mewujudkan fungsi tangkapan layar video online

Izinkan saya menjelaskan kepada Anda demo kecil menarik yang saya lihat beberapa hari yang lalu: tangkapan layar online dari video tersebut. Berikut rendering setelah saya modifikasi dan menambahkan fitur baru:

Keren bukan? Sebenarnya cukup sederhana, saya akan kasih tahu cara melakukannya di bawah ini.

Hal ini terutama dibagi menjadi tiga fungsi utama, yang pertama adalah yang pertama:

Gunakan objek URL untuk mendapatkan tautan video dan menampilkannya:

Objek URL js memiliki metode createObjectURL, yaitu dapat memperoleh URL suatu file (objek File) kemudian memasukkannya ke dalam atribut src pada elemen video, sehingga video tersebut dapat ditampilkan. Tentu saja ada beberapa cara untuk mendapatkan objek File, seperti menggunakan elemen input atau menyeret. Cuplikan kode lengkap:

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

Tentu saja, saya tidak menulis seperti ini di kode sumber, hanya untuk memberikan demonstrasi. Untuk penggunaan URL yang lebih spesifik, Anda dapat membaca artikel ini atau MDN.

Langkah selanjutnya adalah langkah kuncinya, tetapi juga sangat sederhana, yaitu menggunakan metode drawImage pada kanvas. Jika Anda membuka Bagian 15.2.6 dari Elevation 3, Anda akan menemukan bahwa penggunaan metode drawImage dijelaskan dalam. sangat detail, tetapi ada satu yang terlewat, yaitu elemen video juga dapat diteruskan ke metode drawImage dan grafik dapat digambar. Cuplikan kode khusus:

 var canvas = document.createElement(canvas);var canvasCtx = canvas.getContext(2d);var video=document.querySelector('video');//Mengatur koordinat sumbu x, y dan ukuran gambar asli, dan x gambar target, label sumbu y, ukuran. canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//Encode ikon base64 ke dalam string url var dataUrl = canvas.toDataURL(image/png);// Masukkan gambar ke dalam atribut src document.createElement('img').src=dataUrl;

Setelah menggambar gambar, panggil metode kanvas toDataURl untuk mengubah gambar menjadi URL berkode base64, yang dapat dimasukkan ke dalam elemen img untuk ditampilkan. Produksi gambar mini selesai. Mengenai hubungan gambar dengan base64, mahasiswa dapat membaca artikel ini.

Prinsip utama penerapan animasi ini adalah: pertama buat gambar besar dengan ukuran yang sama dengan video pada posisi asli video, atur ke layout absolut (posisi:absolut), buat gambar kecil di mana thumbnail sebenarnya ditempatkan , dan atur menjadi tidak terlihat (visibilitas: tersembunyi), lalu gambar besar dipindahkan ke kiri dan atas, dan lebar serta tinggi dikurangi ke tempat sebenarnya di mana thumbnail ditempatkan, dan efek animasi terbentuk. Terakhir, hapus gambar besar dan tampilkan gambar kecil. Cuplikan kode khusus:

 fungsi getOffset(elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent; while (offsetParent) { pos.x += offsetParent.offsetLeft; .offsetTop; offsetParent = offsetParent.offsetParent;

Fungsi ini memperoleh jarak antara gambar kecil dan area pandang (viewport) dan memberikannya ke gambar besar sebagai parameter perpindahan. Bagian 12.2.3 dari Elevation 3 memiliki kode yang hampir sama, dengan instruksi rinci dan fungsi alternatif getBoundingClientRect juga disebutkan, silakan baca buku untuk detailnya.

Kode berikut ini untuk membuat gambar besar dan gambar kecil serta mendapatkan efek animasi. Untuk kenyamanan dan kemudahan pemahaman, saya menggunakan JQuery di sini

 var $imgBig = $(<img/>);//Menetapkan posisi awal gambar besar yaitu video aslinya. $imgBig.css({ posisi: absolut, kiri: video.offsetLeft, atas: video.offsetTop, lebar: video.offsetWidth+ px, tinggi: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();//Dapatkan parameter jarak gambar kecil untuk mendapatkan efek animasi gambar besar. var offset = getOffset($img[0]);//Tambahkan efek animasi $imgBig.animate({ kiri: offset.x + px, atas: offset.y + px, lebar: $img.width() + px, tinggi: $img.height() + px}, 500, fungsi () { $img.show(); $imgBig.remove();});

Nah, itu saja untuk bagian kode utamanya. Tentu saja, masih banyak detail implementasi dan fungsi lainnya yang mungkin belum ditampilkan, jadi saya tidak akan menjelaskannya satu per satu. Anda bisa masuk ke detailnya setelah membaca kode sumber. Ajukan pertanyaan.

Di bawah ini adalah alamat kode sumber saya, Anda dapat mencobanya:

demo di github

Di atas adalah video dikombinasikan dengan kanvas yang diperkenalkan editor kepada Anda untuk mewujudkan fungsi tangkapan layar video online. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!