ในเวอร์ชันก่อนหน้านี้มีความต้องการบนท้องถนน ใช้ URL เพื่อสร้างโค้ด QR แล้วรวมกับรูปภาพอื่นเพื่อสร้างรูปภาพให้กับคุณ
แนวคิดในการนำไปปฏิบัติก็เป็นเช่นนี้หลังจากสร้างภาพ ฉันพบว่าภาพเบลอมาก วิธีแก้ไขคือขยายแคนวาสสองครั้ง และทำให้พารามิเตอร์อื่นๆ เกินจริงขึ้นสองเท่า
jr-qrcode คุณสามารถใช้ npm install --save jr-qrcode เพื่อติดตั้งแพ็คเกจนี้
ฟังก์ชั่นนี้คือการแปลงข้อความเป็น data:base64 เพื่อใช้งานโดย img's src
รหัสมีดังนี้
นำเข้า React, { ส่วนประกอบ } จาก 'react'const qrcode = need('jr-qrcode')const loadImg = (src) => { const paths = Array.isArray(src) ? src : [src]; ]; paths.forEach((path) => { allowance.push(สัญญาใหม่ ((แก้ไข, ปฏิเสธ) => { ให้ img = ใหม่ Image(); img.crossOrigin = Anonymous; img.src = path; img.onload = () => { แก้ไข (img); }; img.onerror = (err) => { console.log('การโหลดรูปภาพล้มเหลว' ') } })) }); return Promise.all(promise);} const getImageData = (url, src) => { const imgsrc = qrcode.getQrBase64(url) la canvas = document.createElement('canvas') const width = document.documentElement.clientWidth const height = document.documentElement.clientHeight canvas.width = width*2 canvas.height = height*2 ให้ ctx = canvas.getContext(2d) loadImg([imgsrc, src]).แล้ว(([img1, img2]) => { ctx.drawImage(img2, 0, 0, ความกว้าง*2, ความสูง*2) ctx.drawImage(img1, ความกว้าง-80, ความสูง*2-220, 200, 160) ctx.fillStyle = 'rgba (0,0,0,0.3)'; ctx.fillRect(ความกว้าง-80, ความสูง*2-60, 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; ctx.fillText('กดค้างไว้เพื่อระบุโค้ด QR', ความกว้าง-80, ความสูง*2-30, 200, 160) ให้ imageURL = canvas.toDataURL(image/png) document.getElementById('mix_img').setAttribute('src',imageURL) })}ส่งออกคลาสเริ่มต้น QRcode ขยาย Component { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network