Pelajari lebih lanjut tentang cara mengatasi masalah gambar kanvas buram di perangkat seluler

Karena beberapa alasan kompatibilitas seluler, salah satu proyek kami memerlukan front-end untuk mengonversi PDF menjadi antarmuka yang dapat dilihat langsung di halaman seluler. Untuk memfasilitasi solusinya, kami menggunakan plug-in pdf.js, yang dapat mengubah pdf menjadi kanvas dan menggambarnya di halaman. Namun, selama proses pengujian, ditemukan bahwa pada browser seluler, konten yang digambar sangat buram (seperti yang ditunjukkan di bawah). Setelah dianalisis, diketahui bahwa hal ini disebabkan oleh layar definisi tinggi terminal seluler. Setelah menyelesaikan masalah, tuliskan alasan dan temuannya secara tertulis

Sebelum menjelaskan permasalahannya, terlebih dahulu Anda perlu memahami beberapa pengetahuan dasar tentang mobile display dan cavan untuk memudahkan eksplorasi lebih lanjut. Jika ingin melihat hasilnya secara langsung, Anda bisa scroll hingga akhir.

Piksel fisik disebut juga piksel perangkat. Kita sering mendengar bahwa resolusi ponsel adalah piksel fisik. Layarnya tersusun dari piksel, artinya layar tersebut memiliki 750 piksel pada arah horizontal dan 1334 piksel pada arah vertikal.

Disebut juga piksel logis, misalnya ukuran Iphone4 dan Iphone3GS sama-sama 3,5 inci. Resolusi fisik iphone4 adalah 640 * 980, sedangkan 3gs hanya 320 * 480. Jika kita menggambar gambar dengan lebar 320px sesuai dengan lebarnya. tata letak sebenarnya, di iphone4 Hanya separuh layar yang memiliki konten, dan separuh sisanya kosong. Untuk menghindari masalah ini, kami memperkenalkan piksel logis dan mengatur piksel logis kedua ponsel ke 320 piksel untuk memudahkan menggambar.

Piksel independen perangkat di atas pada akhirnya untuk kemudahan perhitungan. Kami telah menyatukan piksel logis perangkat, tetapi piksel fisik yang diwakili oleh setiap piksel logis tidak pasti untuk menentukan hubungan antara piksel fisik dan piksel logis tanpa penskalaan , , kami memperkenalkan konsep Rasio Piksel Perangkat (DPR)

 Rasio piksel perangkat = piksel perangkat / piksel logis DPR = DP / DIP

Ada banyak sekali teori yang disebutkan di atas. Berikut adalah gambar untuk menjelaskannya.

Seperti dapat dilihat dari gambar di atas, dengan ukuran piksel logis yang sama, layar definisi tinggi memiliki piksel fisik yang lebih banyak. Di bawah layar normal, 1 piksel logis sama dengan 1 piksel fisik, sedangkan di bawah layar definisi tinggi dengan dpr = 2, 1 piksel logis terdiri dari 4 piksel fisik. Ini juga alasan mengapa layar definisi tinggi lebih halus.

Ini adalah poin pengetahuan yang harus diketahui oleh setiap orang yang mengetahui kanvas, dan ini juga merupakan inti masalah yang akan kita analisis selanjutnya.

Penjelasan tentang bitmap akan kita tinggalkan nanti. Sekarang kita hanya perlu mengetahui bahwa gambar yang digambar oleh canvas adalah bitmap.

Atribut lebar dan tinggi kanvas sangat memudahkan pemula melakukan kesalahan. Kedua properti ini sering dikacaukan dengan properti lebar dan tinggi di CSS.

Misalnya, kita memiliki kode berikut (1):

 <lebar kanvas=600 tinggi=300 gaya=lebar: 300 piksel; tinggi: 150px></kanvas> 

• Lebar dan tinggi dalam gaya masing-masing mewakili lebar dan tinggi yang ditempati oleh elemen kanvas pada antarmuka, yaitu lebar dan tinggi dalam gaya.
• Lebar dan tinggi dalam atribut mewakili lebar dan tinggi piksel sebenarnya dari kanvas.

Jika masih belum bisa memahaminya, bisa dibayangkan seperti kode berikut (2):

 <!-- Piksel logo.png adalah 600 * 300 --><img style=width: 300px; tinggi: 150px src=logo.png />

Lebar dan tinggi kanvas default adalah 300 * 150. Setelah mengatur css, kanvas akan diskalakan (catatan tidak dipotong) sesuai dengan lebar dan tinggi css yang ditetapkan , yang sama dengan tag img.

Kode di atas (1) sebenarnya dapat dijelaskan dengan cara yang lebih populer, yaitu satu piksel logis sebenarnya diisi oleh dua piksel kanvas.

Di atas adalah pengenalan beberapa pengetahuan dasar yang diperlukan, dan eksplorasi formal akan dimulai di bawah.

Pertama-tama, kami menyebutkan bahwa menggunakan kanvas untuk menggambar gambar adalah bitmap, dan jpg serta png yang biasa kami gunakan juga bitmap. Jadi apa itu bitmap?

Bitmap, disebut juga peta piksel atau peta raster, menyimpan dan menampilkan gambar dengan mencatat warna, kedalaman, transparansi, dan informasi lain dari setiap titik dalam gambar. Lebih konkretnya, Anda dapat menganggap bitmap sebagai teka-teki besar. Teka-teki ini memiliki potongan yang tak terhitung jumlahnya, dan setiap bagian mewakili piksel warna solid. Secara teoritis, satu piksel bitmap sama dengan satu piksel fisik . Namun bagaimana jika Anda menggunakan layar definisi tinggi, seperti layar retina Apple, untuk melihat gambar?

Misalkan kita memiliki kode berikut, yang akan ditampilkan pada layar retina iPhone 4:

 <lebar kanvas=320 tinggi=150 gaya=lebar: 320 piksel; tinggi: 150px></kanvas>

Piksel fisik iPhone 4 sendiri adalah 640*980, sedangkan piksel independen perangkat adalah 320*480, yang berarti 1 piksel CSS sebenarnya terdiri dari 4 piksel fisik. Piksel kanvas adalah 320*150, dan piksel CSS-nya adalah 320 * 150. Artinya satu piksel css akan terdiri dari satu elemen kanvas, sehingga konversinya dilakukan seperti ini: Pada layar retina, satu piksel kanvas (atau satu piksel bitmap) akan mengisi 4 piksel fisik karena satu piksel bitmap tidak dapat dibagi lagi, piksel tersebut hanya dapat mengambil warna terdekat, sehingga menyebabkan gambar menjadi buram.

Jika Anda masih bingung, gambar berikut dapat menggambarkan bagaimana bitmap diisi pada layar retina:

Sisi kiri gambar di atas menunjukkan aturan tampilan pada layar normal terlihat ada 4 piksel bitmap, sedangkan layar definisi tinggi di sebelah kanan memiliki 16 piksel. Karena pikselnya tidak bisa dipotong, warnanya berubah.

Namun satu hal yang belum dijelaskan dengan jelas adalah mengapa gambar mengambil warna terdekat daripada mengambil nilai aslinya secara langsung. Hal ini juga menjadi penyebab keburaman.

Berikut ini adalah penjelasan salah satu teman senior saya. Baru saja kami mengatakan bahwa setiap elemen bitmap sebenarnya adalah piksel warna solid. Sekarang misalkan kita perlu menggambar angka 0 pada layar normal dengan ukuran css 4px * 4px dan dpr 1. Maka yang kita gambar akan terlihat seperti gambar berikut, dimana 1 mewakili piksel hitam dan 0 mewakili piksel putih.

Terlihat pada saat dpr relatif kecil pola 0 kita masih relatif terlihat jelas. Nah jika ukuran css kita tetap tidak berubah, tetapi gambar tergambar di layar retina, akan seperti apa efeknya?

Kita tahu bahwa di bawah layar retina, satu piksel CSS mewakili 4 piksel fisik. Jika kita tidak melakukan pemrosesan apa pun, langsung menyusunnya sesuai matriks di atas, dan memperluas matriksnya, kita akan menemukan bahwa di bawah layar retina, pola kita memiliki a perasaan bergerigi yang sangat jelas. Gambar tersebut jelas tidak memiliki sedikit warna Hue.

Jika kita ubah sedikit gambarnya, ubahlah menjadi gambar berikut

Gambar langsung terasa lebih lembut, namun tempat yang seharusnya diisi dengan 4 0 menjadi 3 1 ditambah 1 0. Ini sebenarnya yang disebut proses penghalusan gambar. Untuk mengatasi rasa jaggy, warna aslinya diubah. Pada gambar yang diisi lebih banyak warna, agar lebih natural, sambungan gambar menjadi warna perkiraan menjelaskan alasannya Saat mengisi warna di atas, yang digunakan bukan warna asli melainkan warna perkiraan.

Setelah melewati penjelasan di atas, sekarang mari kita rangkum kesimpulan berikut. Sekarang terminal seluler menjadi populer dan layar definisi tinggi pada dasarnya menjadi populer, piksel CSS 1 piksel sebenarnya mewakili 4 atau lebih piksel fisik. Namun, karena masalah kode kami, 1 piksel CSS piksel dan 1 piksel kanvas kami sama, sehingga 1 piksel kanvas sebenarnya perlu diisi dengan 4 piksel fisik atau lebih piksel menggunakan perkiraan warna asli, sehingga menghasilkan gambar buram.

Setelah Anda memahami penyebab masalahnya, maka mudah untuk menyelesaikan masalah tersebut. Hal terpenting untuk menyelesaikan masalah tersebut adalah dengan menyamakan satu piksel kanvas dan satu piksel fisik.

Ada atribut devicePixelRatio yang tergantung di bawah objek jendela browser versi lebih tinggi, yang merupakan dpr yang disebutkan di atas.

Ketika lebar dan tinggi elemen kanvas css ditentukan, kita bisa melakukan ini

 let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');let dpr = window.devicePixelRatio; // Asumsikan dpr adalah 2// Dapatkan lebar dan tinggi css let { lebar: cssLebar, tinggi: cssHeight } = kanvas.getBoundingClientRect();// Menurut dpr, perluas piksel kanvas kanvas sehingga satu piksel kanvas sama dengan satu piksel fisik canvas.width = dpr * cssWidth; canvas.height = dpr * cssHeight; // Saat kanvas mengembang, sistem koordinat kanvas juga mengembang. Jika isi gambar didasarkan pada sistem koordinat asli, maka isinya akan diperkecil // sehingga skala gambar perlu diperbesar ctx.scale(dpr,dpr);

Seringkali ketika kita menemukan suatu masalah, kita tidak bisa fokus untuk menyelesaikan masalah tersebut. Sebaliknya, kita harus memahami secara mendalam penyebab masalah tersebut agar kita bisa melangkah lebih baik.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.