Saat ini, terdapat banyak aktivitas pengoperasian akun publik WeChat, dan ada kebutuhan untuk membuat gambar. Setelah gambar dibuat, gambar tersebut dapat dikirim ke teman dan diedarkan di Momen, yang kondusif untuk promosi produk!
1. Anda dapat menggunakan kanvas untuk menghasilkan gambar, tetapi karena sudah ada perpustakaan sumber terbuka bernama html2canvas, saya tidak menulisnya sendiri untuk menghemat waktu.
alamat github:html2canvas
Berhentilah bertele-tele dan mari kita lihat dulu! ! !
Demo Langsung
/** * Dapatkan rasio piksel berdasarkan window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1; nilai ke adalah bilangan bulat*/ fungsi parseValue(nilai) { return parseInt(nilai, 10 }; Draw canvas */ async function drawCanvas (selector) { // Dapatkan node DOM yang ingin Anda konversi const dom = document.querySelector(selector); const box = window.getComputedStyle(dom); simpul DOM const width = parseValue(box.width); const height = parseValue(box.height); // Dapatkan rasio piksel const scaleBy = DPR(); Buat elemen kanvas khusus var canvas = document.createElement('canvas'); // Atur atribut elemen kanvas lebar dan tinggi ke lebar dan tinggi simpul DOM * rasio piksel canvas.width = width * scaleBy; scaleBy; //Setel lebar dan tinggi kanvas css ke lebar dan tinggi node DOM canvas.style.width = `${width}px`; `${height}px`; // Dapatkan kuas const konteks = kanvas.getContext('2d'); // Perbesar semua konten gambar dengan rasio piksel konteks.scale(scaleBy, scaleBy); = tinggi; kembali menunggu html2kanvas(dom, {kanvas}).lalu(fungsi () { convertCanvasToImage(kanvas, x,y) }) } /** * Konversi gambar ke format base64*/ function convertCanvasToImage(kanvas, x, y) { biarkan gambar = Gambar baru(); biarkan _container = document.getElementsByClassName('container')[0]; ) [0]; gambar.lebar = x; gambar.tinggi = y; kanvas.toDataURL(gambar/png); _body.removeChild(_container); dokumen.body.appendChild(gambar); } drawCanvas('.container')2. Karena ponsel masa kini semuanya memiliki layar definisi tinggi, maka akan muncul keburaman jika Anda tidak melakukan pemrosesan apa pun. Mengapa terjadi keburaman? Ini melibatkan rasio piksel perangkat devicePixelRatio js menyediakan window.devicePixelRatio untuk mendapatkan rasio piksel perangkat
fungsi DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { kembalikan window.devicePixelRatio } kembalikan 1;Fungsi DPR ini untuk mendapatkan rasio piksel perangkat. Apa yang harus kita lakukan setelah mendapatkan rasio piksel?
var canvas = document.createElement('canvas'); // Menyetel atribut elemen kanvas lebar dan tinggi ke lebar dan tinggi node DOM * rasio piksel canvas.width = width * scaleBy; canvas Lebar dan tinggi css adalah lebar dan tinggi node DOM canvas.style.width = `${width}px`; Dapatkan kuas const konteks = canvas.getContext('2d'); // Perbesar semua konten gambar dengan rasio piksel konteks.scale(scaleBy, scaleBy);3. Setelah mendapatkan rasio piksel perangkat, kalikan canvass.width dan canvas.height dengan rasio piksel perangkat, yaitu scaleBy; saat ini, atur canvas.style.width dan canvas.style.height ke lebar dan tinggi dom. Coba pikirkan, mengapa Anda menulis ini? Terakhir, saat menggambar, konten yang digambar diperbesar dengan rasio piksel
Misalnya lebar dan tinggi perangkat iPhone 6S adalah 375 Jadi kalau digambar satu-ke-satu, gambarnya akan buram di layar definisi tinggi. Lihat saja gambarnya dan ceritakan kisahnya
6ditambah DPR=3
4. Terakhir, panggil canvas.toDataURL(image/png); tetapkan nilai ke image.src. Karena gambar tidak dapat disimpan di WeChat, Anda hanya dapat membuat file gambar dan memanggil fungsi tekan lama WeChat untuk menyimpan gambar ke album, seperti ditunjukkan pada gambar:
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.