La la la, mari kita bahas persyaratannya terlebih dahulu. Produk ingin pengguna membagikan gambar ke WeChat, QQ, dan platform lain dalam aplikasi kita. Gambar tersebut berisi nama pengguna, avatar, dan kode QR dengan informasinya sendiri. Lalu, bagaimana cara membuat poster ini~~~
Pertama-tama, bos kami memberi tahu saya bahwa ada plugin bernama html2canvas. Fungsinya untuk mengubah node DOM menjadi gambar, dan itu bagus. Saya mengujinya, dan berhasil, tetapi ~ plug-in ini agak besar. Rasanya rugi memperkenalkan hal sebesar itu untuk memenuhi kebutuhan poster! ! ! Jadi, sebaiknya aku menggambarnya sendiri~
Pertama, renderingnya
Dangdangdangdang~~~Poster terakhir yang dibuat menyertakan avatar, nama, dan kode QR. Tentu saja, kode QR pada gambar adalah kode QR Baidu~ Terakhir, base64 dibuat untuk dibagikan di platform utama.
Tanpa basa-basi lagi, berikut kodenya (saya belum kompilasi kode ini karena malas...)
<canvas id=myCanvas width=750 height=1200 style=border:1px solid #d3d3d3;background:#ffffff;></canvas>
Node DOM sangat sederhana, cukup buat tag kanvas dan tulis beberapa atribut sesuka Anda~
var canvas = document.getElementById(myCanvas); //Dapatkan fungsi node kanvas imageToCanvas(canvas,url1,url2,code) {/ //Masukkan gambar latar belakang node kanvas url1 avatar url2 Kode QR var ctx = canvas.getContext(2d ) ; var img1 = Gambar baru(); img1.src = url1; //Saya tidak akan menjelaskan yang sebelumnya, buat gambar img1.onload = function(){ ctx.drawImage(img1,0,0); //Saat gambar dimuat, gambar tersebut ditugaskan ke kanvas mulai dari 0 0. var img2 = Gambar baru(); img2.src = url2; img2.onload = function(){ ctx.save(); //Simpan status kanvas saat ini ctx.arc(374, 134, 44, 0, 2 * Matematika PI); //Operasi pemotongan memotong avatar persegi menjadi lingkaran//Memotong lingkaran dari kanvas ctx.clip(); //Pangkas ctx.drawImage(img2, 330, 90, 88, 88); //Letakkan img2 pada koordinat 330 90 dengan ukuran 88 ctx.restore(); //Lepaskan status kanvas ctx.font=28px Arial; textAlign=tengah; ctx.fillStyle ='#FFFFFF'; //Langkah sebelumnya adalah menyetel atribut teks ke tengah ctx.fillText(nama Anda Shenma, 375,220); //Teks di sini dikodekan secara keras. Dalam praktiknya, meneruskan lebih banyak parameter tidak masalah var img3 = Gambar baru(). ; img3.src = kode; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); = convertCanvasToImage(kanvas); //Konversi gambar ke console.log(imgCode.getAttribute('src')) base64 } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; //Inisialisasi fungsi convertCanvasToImage(kanvas) { var image = new Image(); //Konversi kanvas menjadi gambar pengembalian img;}Dengan cara ini, Anda bisa mendapatkan base64 dan kemudian menggunakannya.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.