In der vorherigen Version gab es eine Nachfrage auf der Straße: Verwenden Sie die URL, um einen QR-Code zu generieren, und kombinieren Sie ihn dann mit einem anderen Bild, um ein Bild für Sie zu erstellen.
Die Umsetzungsidee ist wie folgtNach dem Generieren des Bildes stellte ich fest, dass das Bild sehr unscharf ist. Die Lösung besteht darin, die Leinwand zweimal zu vergrößern und andere Parameter um das Doppelte zu übertreiben.
jr-qrcode Sie können npm install --save jr-qrcode verwenden, um dieses Paket zu installieren
Die Funktion besteht darin, Text in data:base64 zur Verwendung durch imgs src zu konvertieren
Der Code lautet wie folgt
import React, { Component } from 'react'const qrcode = require('jr-qrcode')const loadImg = (src) => { const paths = Array.isArray(src) : [src]; ]; paths.forEach((path) => { versprechen.push(neues Versprechen((auflösen, ablehnen) => { let img = new Image(); img.crossOrigin = Anonymous; img.onload = () => { img.onerror = (err) => { console.log('Bild laden fehlgeschlagen ') } })) }); return Promise.all(promise);}const getImageData = (url, src) => { const imgsrc = qrcode.getQrBase64(url) let canvas = document.createElement('canvas') const width = document.documentElement.clientWidth const height = document.documentElement.clientHeight canvas.width = width*2 canvas.height = height*2 let ctx = canvas.getContext(2d) loadImg([imgsrc, src]).then(([img1, img2]) => { ctx.drawImage(img2, 0, 0, width*2, height*2) ctx.drawImage(img1, width-80, height*2-220, 200, 160) ctx.fillStyle = 'rgba (0,0,0,0.3)'; ctx.fillRect(width-80, height*2-60, 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; ctx.fillText('Langes Drücken, um QR-Code zu identifizieren', width-80, height*2-30, 200, 160) let imageURL = canvas.toDataURL(image/png) document.getElementById('mix_img').setAttribute('src',imageURL) })}Standardklasse exportieren QRcode erweitert Component { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.