Penjelasan mendetail tentang berbagi poster WeChat kanvas html5 (lubang panjat pribadi)

Artikel ini memperkenalkan berbagi poster kanvas WeChat dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:

1. Buat gambar secara acak
2. Dapatkan avatar dan nama pengguna WeChat (sesuaikan antarmuka backend untuk mendapatkannya)
3. Gabungkan avatar dan judul pengguna dengan gambar yang dibuat secara acak ke dalam poster
4. Mungkin pengguna di halaman sebelumnya juga mengisi teks keinginan yang perlu diisi pada gambar juga.

1. Canvas tidak valid ketika ditekan lama di browser WeChat dan tidak dapat dibagikan seperti img (maka saya akan mengubahnya menjadi img)
2. Setelah mengonversinya menjadi img, itu dapat ditampilkan di alat pengembang WeChat, tetapi tidak akan berfungsi di perangkat sebenarnya (saya ingin menangis tetapi tidak menangis). Du Niang mengatakan bahwa gambar tersebut mungkin lintas domain ^-^
3. Sintesis avatar pengguna juga memerlukan sudut membulat. Saya bilang tidak, jadi saya hanya melihat dokumentasi canvas api.
4. Jika teks di kanvas melebihi lebar yang ditentukan, maka harus dibungkus. Saya hanya mengetahui berbagai metode perataan teks yang tidak melebihi lebar yang ditentukan ctx.textAlign = 'center';
5. Masalah kanvas menjadi buram di bawah layar definisi tinggi (sangat sederhana, saya tidak tahu mengapa Du Niang begitu bertele-tele) bukanlah canvas.witdt=innerWidth*devicePixelRatio

 <div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>

CSS

 <gaya> *{ margin:0; bantalan:0; } badan, html { lebar: 100%; tinggi: 100%; } .imgBox { lebar: 100%; tampilan: blok; }</gaya>

naskah

 // struktur utama js new Vue({ el:'imgBox', data:{ urlParam: {},//Dapatkan objek nilai di url randomNum: 1,//Nomor acak digunakan untuk menentukan halaman berkat mana namapengguna: '' ,//Nama pengguna imgSrc: '',//Gambar akhir yang disintesis userImg: '',//Gambar avatar pengguna userMessage: '',//Pesan pengguna}, metode: { // Bagikan ke teman wxShareFriends: function () {}, // Header permintaan inisialisasi wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } } }, // Dapatkan angka acak [1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // Dapatkan avatar dan judul pengguna WeChat serta kata-kata pemberkatan pengguna getUserInfo() { var vm = this; , fungsi (data) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; (vm.randomNum % 2 == 0) { vm.userMessage= 'Saat kita bertemu di dunia fana, kita sudah tua. Waktu telah berlalu. Bertemu satu sama lain di dunia fana adalah hal yang halus dan sakral.' else { vm.userMessage = 'Bertemu di dunia fana, kita sudah tua' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // Dapatkan halaman dpr dan lebar getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; lebar = dokumen.body.clientWidth; } kembalikan windowInfo }, // Menggambar gambar latar belakang berukuran besar untuk dibagikan pada halaman aktivitas drawCanvasBgImg() {}, // Potong lingkaran pada kanvas gambar latar belakang dan isi dengan avatar pengguna drawCanvasUserImg(canvas, ctx, dpr) {}, // Isi dalam nama pengguna atau pesan pengguna canvasFillText (kanvas, ctx, dpr, lingkaranR) {}, // Sintesis gambar bersama base64-bit convertCanvasToImage (kanvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png beracun dan kode QR tidak dapat dikenali di Android dan tidak dapat dialihkan this.$Spin.hide();

1. drawCanvasBgImg()
2. drawCanvasUserImg (kanvas, ctx, dpr)
3. canvasFillText (kanvas, ctx, dpr, lingkaranR)
4. konversiCanvasToImage(kanvas)

 //Setelah mendapatkan data, mulailah menggambar gambar latar belakang. Idenya sangat sederhana: gambar gambar ke dalam kanvas, lalu gambar teks avatar di kanvas dan ubah menjadi img drawCanvasBgImg () { var vm = this; = document.createElement( canvas); var ctx = canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//Dapatkan lebar layar untuk var layar seluler adaptif lebar kanvas dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** Alias ​​​​sepertinya tidak berguna, saya tidak tahu apakah itu digunakan di tempat yang salah** canvas.width = dpr * clientWidth; //Karena layar ponsel Saat menggunakan layar retina, itu akan dirender beberapa kali. Gunakan dpr untuk mengatur lebar dan tinggi kanvas secara dinamis untuk menghindari gambar buram. 375;//Menghapus bilah status di header WeChat seharusnya 603. Saya tidak mengerti bahwa 603 masih tidak dapat mengisi layar dengan gambar, jadi saya menambahkannya ke 609. var img = new Image(); crossOrigin = '';//Gambar dead pit melintasi Domain (img.crossOrigin = Anonymous masih tidak dapat menampilkan gambar berformat base64) img.src = http://xxx + this.randomNum + .jpg; img.onload = fungsi () { ctx.drawImage(img, 0, 0, kanvas.lebar, kanvas.tinggi); vm.drawCanvasUserImg(kanvas, ctx, dpr);

 //Potong lingkaran pada kanvas gambar latar belakang dan isi dengan avatar pengguna drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var lingkaranR = 50 * dpr; lebar / 2 ;//X koordinat pusat lingkaran var lingkaranY = 50 * dpr;//Koordinat Y pusat lingkaran var imgX = lingkaranX - lingkaranR;//Koordinat awal gambar X var imgY = lingkaranY - lingkaranR;//Koordinat awal gambar Y var imgWidth = 2 * lingkaranR;//Gambar berukuran sesuai lingkaran var img = new Image(); img.crossOrigin = ''; = this.userImg; img .onload = function () { ctx.save(); // Simpan status ctx ctx.arc(circleX, CircleY, CircleR, 0, 2 * Math.PI); //Gambarlah sebuah lingkaran ctx.clip(); //Pangkas lingkaran di atas ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); ; //Pulihkan status vm.canvasFillText(kanvas, ctx, dpr, lingkaranR }},

 // Isi nama pengguna atau pesan pengguna canvasFillText (kanvas, ctx, dpr, lingkaranR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial'; var userNameY = 0; userMessageX = dpr * 40; //koordinat sumbu X dari pesan pengguna var userMessageY = 0; //koordinat sumbu Y dari pesan pengguna var lastSubStrIndex = 0;//String subskrip var lineWidth = 0;//Lebar satu baris var allTextWidth = 0;//Semua lebar karakter ctx.font = fontSizeThis; // Nama pengguna diperlukan untuk menulis nama pengguna jika (ini.namapengguna) { namapenggunaY = lingkaranR * 2.5; ctx.fillStyle = #0094ff; ctx.textAlign = 'tengah'; canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; ctx.fillStyle = #000; // Dapatkan lebar karakter untuk (var i = 0; i < this.userMessage .panjang; i++) { allTextWidth += ctx.measureText(ini.pesan pengguna[i]).lebar } // Jika panjang string lebih panjang dari area kanvas, bungkus baris if (allTextWidth > canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx. MeasureText(this.userMessage[ i]).width; if (lineWidth > canvas.width - 2*userMessageX) { ctx.textAlign = 'kiri'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;//Tetapkan tinggi baris lineWidth = 0; lastSubStrIndex = i; panjang - 1) { ctx.fillText(ini.userMessage.substring(lastSubStrIndex, i + 1), pesan pengguna },

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