Ringkasan masalah dan solusi yang dihadapi dalam poster sintetis kanvas html5

Kata Pengantar: Saya baru -baru ini membuat item seluler dengan gambar poster sintetis kanvas. Metode ini merangkum sebagai berikut:

Deskripsi Masalah: Karena lebar dan tinggi kanvas hanya dapat mengatur nilai PX dan tidak mendukung unit REM, sulit untuk mencapai efek kanvas yang ditutupi dengan layar penuh ketika resolusi layar perangkat seluler rumit. Solusi: Dapatkan nilai ClientWidth dari layar ponsel melalui JS dan berikan ke kanvas untuk mencapai efek mengadaptasi layar penuh;

 Var clientwidth = document.documentElement.clientwidth; px '); $ (#main) .css (' tinggi ', canvasheight+' px ');

Deskripsi Masalah: Ada masalah yang tidak jelas dengan gambar yang dihasilkan oleh kanvas, terutama jika ada kode QR pada gambar, yang perlu dikenali, pengguna tidak dapat mengenalinya;

Solusi: 1) Anda dapat mengutip plug-in hidpi-canvas.js untuk menyelesaikan masalah ini;

2) Anda juga dapat mengatur nilai lebar dan tinggi dalam gaya kanvas untuk mengatur ukuran yang Anda inginkan, dan kemudian memperbesar nilai lebar dan tinggi kanvas masing -masing.

Deskripsi Masalah: Ketika beberapa ponsel Android mengekspor gambar Base64 dari kanvas, mereka hanya dapat menampilkan setengah dari gambar efek efeknya.

Solusi: Rasio Pixel Peralatan, menilai modelnya. Ukuran asli.

 // Hidpi-Canvas memperbesar atribut lebar dan tinggi kanvas.

Deskripsi Masalah: Selama pengujian, ditemukan bahwa ponsel iPhone mengunggah foto rotasi, dan gambar yang diunggah dari internet tidak akan terjadi, dan Android normal.

Solusi: Masalah ini dapat diselesaikan dengan menggunakan plug -in exif.js.

 var file = $ (ini) [0] .files [0]; ) ;;

Deskripsi Masalah: Ketika ada gambar permintaan silang -domain di kanvas, gambar basis output gagal.

Solusi: Bug ini perlu diselesaikan dengan back -end dan back -end.

 Var pageqrcodeimg = qrcodecanvas.todaurl ('gambar/jpg');

Deskripsi Masalah: Situasi layar putih sesekali muncul ketika kanvas menggambar.

Solusi: Tambahkan fungsi Onload ke IMG, dan kemudian lakukan operasi menggambar setelah membaca gambar.

 qrcodeimg.onload = function () {// gambar gambar}

Deskripsi Masalah: Gambar yang dihasilkan oleh kanvas tidak dapat disimpan atau dikenali kode QR di browser WeChat.

Solusi: Kompres kualitas gambar saat mengekspor gambar base64.

 var myCanvas = document.getElementById (main);

Postscript: Masalah saat ini yang dihadapi pada dasarnya adalah ini.

Di atas adalah semua isi artikel ini.