Contoh kode cara menggunakan Canvas untuk mengimplementasikan tanda tangan online

Dengan pesatnya perkembangan teknologi komputer dan jaringan, teknologi tanda tangan online semakin banyak digunakan di kantor tanpa kertas. Pengoperasian yang intuitif dan nyaman ini tidak hanya dapat meningkatkan efisiensi kantor secara signifikan, tetapi juga menggunakan metode penyimpanan digital untuk menghindari masalah tradisional seperti kesulitan dalam menyimpan dan mengambil. tanda tangan kertas. Dalam kehidupan kita sehari-hari, sudah banyak skenario yang menggunakan teknologi tanda tangan online, seperti: tanda tangan mesin POS, tanda tangan pengiriman ekspres, tanda tangan bisnis bank atau instansi pemerintah, dll. Baru-baru ini, saya sedang mengerjakan kebutuhan pemrosesan bisnis perusahaan, yang juga melibatkan tanda tangan online. Kami menggunakan teknologi Canvas untuk mengimplementasikannya. Selanjutnya, mari kita bahas cara menggunakan Canvas untuk mengimplementasikan tanda tangan online!

Kanvas adalah elemen baru dalam HTML5, digunakan untuk menggambar grafik di halaman web. Kanvas ini diperkenalkan oleh Apple di browser web Safari 1.3. Alasan untuk memperluas HTML adalah karena kemampuan menggambar HTML di Safari dapat digunakan di Mac OS X desktop. Dashboard komponen, dan Apple juga menginginkan cara untuk mendukung grafis skrip di Dashboard. Kedua browser tersebut, Firefox 1.5 dan Opera 9, juga mengikuti jejak Safari dan mulai mendukung Canvas.

Sekarang, tag Canvas adalah salah satu peningkatan terbesar dalam HTML5, karena memungkinkan kita mengimplementasikan desain grafis halaman web tanpa menggunakan gambar. Ini seperti kanvas. Ia tidak memiliki kemampuan menggambar, tetapi menampilkan API gambar ke JavaScript klien. Dengan dukungan JavaScript, kita dapat menggunakannya dalam lingkup kanvas untuk mencapai efek yang diinginkan.

Fungsi ini dapat diimplementasikan baik itu Canvas, SVG atau Flash, tapi mengapa kami memilih Canvas?

Pertama-tama, karena kita perlu mendukung platform seluler secara fungsional, kita dapat langsung meninggalkan Flash. Flash tidak memiliki dukungan ramah di sisi seluler, tetapi Canvas dan SVG keduanya memiliki kemampuan lintas platform yang baik.

• Kanvas didasarkan pada piksel dan menyediakan fungsi gambar 2D. Fungsi yang disediakan lebih primitif dan cocok untuk pemrosesan piksel, rendering dinamis, dan gambar volume data besar lebih baik. Produsen besar juga Mekanisme akselerasi perangkat keras kanvas telah lama diterapkan.
• SVG adalah vektor, menyediakan serangkaian elemen grafis dengan fungsi yang lebih lengkap dan membentuk sejumlah besar objek interaktif. Lebih baik dalam interaksi di alam, tetapi kinerjanya akan lebih lemah, dan lebih cocok untuk tampilan gambar statis, tinggi - skenario aplikasi melihat dan mencetak dokumen dengan tepat.

Keduanya memiliki bidang keahliannya masing-masing, berdasarkan hal di atas, kami memilih Canvas untuk mengimplementasikan fungsi tanda tangan.

Selanjutnya, mari kita lihat efek penerapannya.

Setelah memahami sumber Canvas, pemilihan teknologi, dan efek rendering akhir, kita akan menulis dari lima bagian pembuatan, menggambar, memantau, menggambar ulang, dan memproses gambar bersama-sama.

Pertama, kita perlu menentukan apakah browser mendukung Canvas:

 isCanvasSupported = (): boolean => { biarkan elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d'));}

Kemudian pilih untuk membuat Canvas atau menampilkan prompt berdasarkan hasil penilaian.

 {isCanvasSupported ? <canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}> :Maaf, browser saat ini tidak mendukung fitur ini! }

Kita tahu bahwa setiap node Canvas memiliki objek konteks yang sesuai, yang dapat kita peroleh dengan langsung meneruskan string 2d sebagai satu-satunya parameter melalui metode getContext() pada objek Canvas. Selanjutnya, kita memperoleh elemen Canvas melalui ref, dan kemudian memperoleh lingkungan gambar di kanvas melalui metode getContext().

 biarkan cxt = ini.kanvas.getContext('2d');ini.setState({cxt: cxt});

Lingkungan sudah siap, ayo mulai menggambar!

Pertama gambar jalur awal:

 cxt.beginPath();

Kemudian atur lebar garis saat ini:

 cxt.lebar garis = 5;

Atur warna garis:

 cxt.strokeStyle = '#000';

Melalui moveTo dan lineTo, kita menggambar garis

 cxt.moveTo(0,0);cxt.lineTo(150,0);//Gambar jalur yang ditentukan cxt.stroke()

Namun, kami menemukan bahwa garis yang ditarik agak kaku

Saat ini, kita dapat menggunakan lineCap untuk mengubah gaya tutup garis di akhir garis dan menambahkan tutup garis bulat di setiap ujungnya untuk mengurangi kekakuan garis.

 cxt.lineCap = 'bulat';

Pada saat yang sama, kita juga dapat menentukan sudut membulat ketika garis berpotongan dengan mengatur lineJoin.

 cxt.lineJoin = 'bulat';

Namun kami juga menemukan bahwa garis yang digambar memiliki tepi bergerigi yang jelas. Saat ini, kita perlu menggunakan fungsi bayangan elemen gambar yang disediakan oleh Canvas untuk mengaburkan tepi bergerigi. Karena ada bayangan, kita dapat mengubah nilai lineWidth dengan tepat.

 cxt.bayanganBlur = 1;cxt.bayanganWarna = '#000';

Apakah sudah menjadi lebih bulat? Pada titik ini, metode menggambar garis kita sudah siap. Selanjutnya, mari kita lihat cara memantau kejadian di kanvas untuk mencapai eksekusi gambar yang konsisten!

Karena kita harus kompatibel dengan PC dan terminal seluler, kita perlu menentukan terlebih dahulu kejadian eksekusi yang sesuai.

 this.state = {peristiwa: ('ontouchstart' di jendela) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}

Setelah kanvas diinisialisasi, kita mulai mendengarkan events[0] events

 this.canvas.addEventListener(ini.events[0], startEventHandler, false);

Dengarkan events[1] dan events[2] di fungsi startEventHandler

 this.canvas.addEventListener(events[1], moveEventHandler, false);this.canvas.addEventListener(events[2], endEventHandler, false);

Inilah intinya, isi inti kita adalah menghitung dan menggambar jalur yang bersilangan

 moveEventHandler(acara: apa saja): void { event.preventDefault(); const {ctx, isSupportTouch} = this.state; const evt = isSupportTouch event.touches[0] : acara; ; const mouseX = evt.clientX - coverPos.kiri; evt.klienY - coverPos.top; cxt.lineTo( mouseX, mouseY );

Seperti yang Anda ketahui tentang Canvas, Canvas Canvas memberi kita ruang datar untuk menggambar. Setiap titik dalam ruang tersebut memiliki koordinatnya sendiri, x melambangkan koordinat horizontal, dan y melambangkan koordinat vertikal. Titik asal (0, 0) terletak di pojok kiri atas gambar. Arah positif sumbu x berada di sebelah kanan titik asal, dan arah positif sumbu y mengarah ke bawah dari titik asal.

Jadi kita menggunakan metode getBoundingClientRect() untuk mendapatkan jarak piksel ke kiri dan atas halaman elemen Canvas relatif terhadap posisi jendela browser, dan kemudian menggunakan properti acara clientX dan clientY untuk mengembalikan koordinat horizontal dan vertikal dari penunjuk mouse ke halaman browser ketika acara dipicu. Terakhir, jalur digambar menggunakan lineTo dan stroke.

Pada saat yang sama, kita harus ingat untuk menghapus events[1] dan events[2] setelah event events[2] dijalankan, jika tidak maka akan menyebabkan penarikan terus menerus.

 endEventHandler(peristiwa: apa saja): void { event.preventDefault(); const {peristiwa, moveEventHandler, endEventHandler} = this.state; this.canvas.removeEventListener(peristiwa[1], moveEventHandler, false); acara[2], endEventHandler, salah);}

Dengan berulang kali mengulang operasi kejadian di atas, fungsi tanda tangan kita pada dasarnya terwujud.

Selama proses penandatanganan, tidak dapat dihindari untuk menandatangani secara salah atau menandatangani terlalu sembarangan, jadi kita perlu mendukung fungsi pembersihan tanda tangan. Saat ini, kami menggunakan metode clearRect() dari Canvas untuk membantu kami menghapus konten bidang kanvas.

 cxt.clearRect(0, 0, lebar kanvas, tinggi kanvas);

Setelah menggambar, kita belum selesai, kita masih perlu mengupload dan menyimpan tanda tangan yang digambar. Saat ini, kita dapat menggunakan metode toDataURL() untuk mengubah Canvas menjadi bentuk file gambar umum.

Biasanya kita bisa langsung melakukan operasi untuk mengubahnya menjadi URI data, lalu menggunakan ajax untuk meminta unggahan dan selesai.

 dataurl = this.canvas.toDataURL('image/png');//ordataurl = this.canvas.toDataURL('image/jpeg', 0.8);

Namun, karena berbagai kebutuhan bisnis, terkadang kami perlu membawa konten lain di halaman. Saat ini, kami dapat menggunakan html2canvas untuk mencapai hal ini. html2canvas dapat membantu kita mengambil screenshot seluruh atau sebagian halaman di sisi browser dan merendernya menjadi Canvas, lalu kita menggunakan metode toDataURL() untuk memprosesnya.

Berbicara tentang html2canvas, izinkan saya memberi Anda tip jebakan. Gambar yang dipotong di beberapa browser versi rendah kosong. Alasannya adalah karena tata letak fleksibel digunakan, dan html2canvas tidak mendukung -webkit-flex atau -webkit-box, sehingga tidak dapat Menghasilkan HTML ke dalam Kanvas, sehingga menghasilkan tangkapan layar putih.

• Tidak menggunakan tata letak fleksibel
• Ubah kode sumber html2canvas, tambahkan -webkit-flex dan -webkit-box ke file html2canvas/dist/npm/parsing/display.js dan juga kembalikan DISPLAY.FLEX;

Melalui langkah-langkah di atas, pada dasarnya kami telah mewujudkan fungsi tanda tangan online. Perlu dicatat bahwa kami menggunakan lingkungan React+TypeScript untuk membangun proyek ini. Penggunaan sebenarnya dari kode di atas perlu dimodifikasi secara tepat berdasarkan lingkungan Anda sendiri.

Artikel ini menggunakan pengetahuan menggambar Canvas yang relatif dangkal. Jika kita ingin menggunakan Canvas untuk produksi animasi, simulasi efek fisik, deteksi tabrakan, pengembangan game, pengembangan aplikasi seluler, dan pengembangan visualisasi data besar, kita juga perlu meninjau geometri matematika yang kita miliki. dipelajari sebelumnya. , pengetahuan fisika, dan kemudian menjelajah secara perlahan. Saat ini, banyak plug-in grafik matang yang diimplementasikan menggunakan Canvas, seperti Chart.js, ECharts, dll. Ada banyak grafik yang indah dan keren di dalamnya, mencakup hampir semua implementasi grafik. Canvas juga memiliki banyak perpustakaan sumber terbuka, seperti ZRender, createJS, Pixi.js, dll. Lapisan bawah ECharts juga mengandalkan perpustakaan kelas Canvas ringan ZRender untuk enkapsulasi.

Oke, mari kita berhenti bicara di sini hari ini. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan. Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.