Beispielcode für Canvas zur Implementierung von QR-Code und Bildsynthese

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.

1. Verwenden Sie jr-qrcode, um URL-Daten zu generieren: base64 für die Verwendung durch IMG
2. Anschließend kombinieren Sie die beiden Bilder auf Leinwand zu einem Bild

Nach 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.