Tangkapan skrin pelaksanaan JavaScript

Dalam pembangunan web, kita selalunya perlu melaksanakan fungsi mengambil tangkapan skrin supaya pengguna boleh menyimpan dan berkongsinya apabila diperlukan. JavaScript ialah salah satu bahasa skrip yang biasa digunakan dalam pembangunan web Cara menggunakan JavaScript untuk mengambil tangkapan skrin adalah kemahiran yang mesti dikuasai oleh pembangun. Artikel ini akan memperkenalkan kaedah dan teknik untuk mengambil tangkapan skrin menggunakan JavaScript.

1. Gunakan Kanvas HTML5 untuk mengambil tangkapan skrin

HTML5 menyediakan elemen Kanvas, yang boleh digunakan untuk melukis grafik pada halaman web, termasuk teks, gambar, animasi, dsb. Apabila mengambil tangkapan skrin, kami boleh menggunakan elemen Kanvas untuk melukis kandungan halaman web pada kanvas untuk mencapai kesan tangkapan skrin.

1. Cipta elemen Kanvas

Tambahkan elemen Kanvas dalam dokumen HTML, tetapkan lebar dan tingginya supaya sama dengan lebar dan tinggi halaman web, dan tetapkan CSSnya gaya kepada "kedudukan: mutlak; kiri: 0px; atas: 0px;", yang membolehkan elemen Kanvas meliputi keseluruhan halaman web.

<canvas id="canvas" width="1920" height="1080" style="position:absolute; left:0px; top:0px;"></canvas>

2. Lukis kandungan web pada Kanvas

Gunakan kaedah getContext() Kanvas untuk mendapatkan persekitaran lukisan 2D dan lukis kandungan web pada Kanvas

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawWindow(window,0,0,canvas.width,canvas.height,"rgb(255,255,255)");

Antaranya, kaedah drawWindow() boleh melukis kandungan dalam tetingkap pelayar atau bingkai ke Kanvas. Parameter pertama ialah objek tetingkap pelayar, parameter kedua dan ketiga ialah koordinat permulaan, parameter keempat dan kelima ialah koordinat penamat, dan parameter keenam ialah warna latar belakang lukisan.

3. Simpan Kanvas sebagai imej

Gunakan kaedah Canvas' toDataURL() untuk menyimpan Canvas sebagai imej format PNG Kodnya adalah seperti berikut:

var image = canvas.toDataURL("image/png");

4

Akhir sekali, gunakan atribut muat turun JavaScript untuk memuat turun fail imej Kodnya adalah seperti berikut:

var link = document.createElement('a');
link.download = "screenshot.png";
link.href = image;
link.click();

Dengan cara ini, pengguna boleh menyimpan tangkapan skrin ke setempat apabila mengklik ". Butang Simpan Tangkapan Skrin".

2. Gunakan pustaka tangkapan skrin pihak ketiga

Selain menggunakan elemen Kanvas, anda juga boleh menggunakan pustaka tangkapan skrin pihak ketiga untuk melaksanakan fungsi tangkapan skrin. Perpustakaan ini biasanya menggunakan JavaScript atau Flash untuk melaksanakan fungsi tangkapan skrin, menyediakan lebih banyak pilihan penyesuaian dan kualiti tangkapan skrin yang lebih tinggi.

html2canvas

html2canvas ialah pustaka JavaScript yang berkuasa yang boleh tangkapan skrin keseluruhan halaman web atau elemen tertentu dan mengeluarkannya sebagai imej format PNG. Ia menyokong menyesuaikan parameter seperti saiz, penskalaan dan pemangkasan tangkapan skrin.

Menggunakan html2canvas adalah sangat mudah Anda hanya perlu memperkenalkan perpustakaan dalam dokumen HTML dan memanggil kaedahnya adalah seperti berikut:

<script src="html2canvas.js"></script>
<script>
    html2canvas(document.body).then(function(canvas) {
        var link = document.createElement('a');
        link.download = "screenshot.png";
        link.href = canvas.toDataURL("image/png");
        link.click();
    });
</script>

Antaranya, kaedah html2canvas() menukar. keseluruhan halaman web ke dalam Kanvas, Kaedah toDataURL() menukarkan Kanvas kepada imej format PNG dan mencipta pautan muat turun untuk memuat turunnya secara setempat.

webkit2png

webkit2png ialah alat tangkapan skrin baris arahan berasaskan Python yang bergantung pada enjin pemaparan WebKit. Walaupun ia bukan berasaskan JavaScript sepenuhnya, ia menawarkan lebih banyak pilihan untuk mengawal kualiti dan cara tangkapan skrin.

Sebelum menggunakan webkit2png, anda perlu memasang Python dan WebKit terlebih dahulu, dan kemudian masukkan arahan berikut pada baris arahan:

webkit2png -W 1920 -H 1080 -o screenshot http://www.example.com

Antaranya, parameter -W dan -H boleh menyesuaikan saiz tangkapan skrin, - Parameter o menentukan nama fail output tangkapan skrin, dan parameter terakhir ialah alamat halaman web untuk dijadikan tangkapan skrin.

webkit2png juga menyediakan pilihan lain untuk menentukan elemen untuk dijadikan tangkapan skrin, tetapkan zum, tetapkan format imej, dsb.

3. Gunakan sambungan penyemak imbas untuk mengambil tangkapan skrin

Selain menggunakan JavaScript dan perpustakaan pihak ketiga, anda juga boleh menggunakan sambungan penyemak imbas untuk mengambil tangkapan skrin. Banyak sambungan penyemak imbas membolehkan anda memilih kawasan tangkapan skrin, format dan kualiti imej yang disimpan secara bebas.

Sebagai contoh, penyemak imbas Chrome menyediakan banyak sambungan untuk melaksanakan fungsi tangkapan skrin, seperti Tangkapan Skrin Hebat dan Tangkapan Skrin Nimbus, dsb. Sambungan ini membolehkan pengguna mengambil tangkapan skrin dan pengeditan dengan mudah serta menyediakan storan awan dan keupayaan perkongsian.

Ringkasan

Merakam tangkapan skrin halaman web ialah kemahiran yang sangat berguna dalam pembangunan web, yang membolehkan pengguna menyimpan dan berkongsi kandungan halaman web dengan mudah apabila diperlukan. Dalam artikel ini, kami memperkenalkan tiga cara untuk mencapai tangkapan skrin: menggunakan elemen Kanvas HTML5, menggunakan perpustakaan pihak ketiga dan menggunakan sambungan penyemak imbas. Setiap kaedah mempunyai kelebihan unik, kelemahan dan senario yang berkenaan Pembangun harus memilih kaedah yang paling sesuai dengan keperluan projek mereka untuk melaksanakan fungsi tangkapan skrin.

Atas ialah kandungan terperinci Tangkapan skrin pelaksanaan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!