Contoh kode kanvas untuk mengimplementasikan kode QR dan sintesis gambar

Di versi sebelumnya, ada permintaan di jalan. Gunakan URL untuk menghasilkan kode QR, lalu gabungkan dengan gambar lain untuk membuat gambar untuk Anda.

1. Gunakan jr-qrcode untuk menghasilkan data url:base64 untuk penggunaan img
2. Kemudian gunakan kanvas untuk menggabungkan kedua gambar tersebut menjadi satu gambar

Setelah membuat gambar, saya menemukan bahwa gambar tersebut sangat buram. Solusinya adalah dengan memperluas kanvas dua kali dan membesar-besarkan parameter lainnya sebanyak dua kali.

jr-qrcode Anda dapat menggunakan npm install --save jr-qrcode untuk menginstal paket ini

Fungsinya untuk mengubah teks menjadi data:base64 untuk digunakan oleh src img

Kodenya adalah sebagai berikut

 import React, { Komponen } dari 'react'const qrcode = require('jr-qrcode')const loadImg = (src) => { const path = Array.isArray(src) ? ]; path.forEach((path) => { janji.push(Janji baru((putuskan, tolak) => { biarkan img = baru Gambar(); img.crossOrigin = Anonim; img.src = jalur; img.onload = () => { tekad(img }; img.onerror = (err) => { console.log('Pemuatan gambar gagal ') } })) }); return Promise.all(promise);}const getImageData = (url, src) => { const imgsrc = qrcode.getQrBase64(url) biarkan kanvas = dokumen.createElement('kanvas') lebar const = dokumen.documentElement.clientWidth const tinggi = dokumen.documentElement.clientHeight kanvas.lebar = lebar*2 kanvas.tinggi = tinggi*2 biarkan ctx = kanvas.getContext(2d) loadImg([imgsrc, src]).lalu(([img1, img2]) => { ctx.drawImage(img2, 0, 0, lebar*2, tinggi*2) ctx.drawImage(img1, lebar-80, tinggi*2-220, 200, 160) ctx.fillStyle = 'rgba (0,0,0,0.3)'; ctx.fillRect(lebar-80, tinggi*2-60, 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; ctx.fillText('Tekan lama untuk mengidentifikasi kode QR', lebar-80, tinggi*2-30, 200, 160) biarkan imageURL = canvas.toDataURL(gambar/png) document.getElementById('mix_img').setAttribute('src',imageURL) })}ekspor kelas default QRcode extends Komponen { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}

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