Sebelumnya kita hanya bisa mengambil gambar melalui tools screenshot lainnya. Fungsi browser modern menjadi semakin canggih. Dengan mempopulerkan H5 secara bertahap, browser itu sendiri dapat mengambil tangkapan layar. html2canvas adalah plug-in front-end. Prinsipnya adalah menggambar node Dom di Canvas. Meskipun sangat nyaman, ia memiliki keterbatasan sebagai berikut:
Karena skenario penggunaan saya sangat sederhana, catat informasi pengecualian, dan halaman pengecualian juga ditentukan sendiri, maka html2canvas sudah cukup untuk digunakan.
Pertama kali saya menggunakan html2canvas, tujuannya adalah untuk mengambil tangkapan layar seluruh halaman dan menghasilkan gambar untuk disimpan pengguna.
Pertama-tama mari kita lihat seperti apa tampilan HTML render.
Dari gambar yang dirender oleh HTML, Anda dapat melihat bahwa gambar di atas memiliki efek sudut membulat, tetapi ketika saya menggunakan html2canvas untuk mengonversi gambar, saya menemukan bahwa efek sudut membulat pada gambar tidak gagal.
Ini menjadi seperti ini. Setelah memikirkan banyak solusi, akhirnya saya memutuskan untuk membuat sudut membulat di bagian belakang menjadi gambar latar belakang transparan, dan kemudian ditumpangkan pada gambar asli melalui pemosisian absolut, yang setara dengan topeng. memengaruhi.
Tentu saja, node DOM dari gambar topeng harus berada di bawah gambar yang memerlukan sudut membulat, serupa dengan
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Gambar asli yang memerlukan sudut membulat--> <img src=/template/images/avatar .png class=img-responsive style=position: absolute;><!--Mask image--></div>
Setelah dibuat, itu akan terlihat normal.
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Gambar asli yang memerlukan sudut membulat--> <img src=/template/images/avatar .png class=img-responsive style=position: absolute;><!--Mask image--></div>Salin kode