Exemple de code pour Canvas pour implémenter le code QR et la synthèse d'images

Dans la version précédente, il y avait une demande dans la rue. Utilisez l'URL pour générer un code QR, puis combinez-le avec une autre image pour créer une image pour vous.

1. Utilisez jr-qrcode pour générer des données URL : base64 pour une utilisation img
2. Utilisez ensuite la toile pour combiner les deux images en une seule image

Après avoir généré l'image, j'ai trouvé que l'image est très floue. La solution est d'agrandir le canevas deux fois et d'exagérer deux fois les autres paramètres.

jr-qrcode Vous pouvez utiliser npm install --save jr-qrcode pour installer ce package

La fonction est de convertir le texte en data:base64 pour une utilisation par le src d'img

Le code est le suivant

 importer React, { Component } from 'react'const qrcode = require('jr-qrcode')const loadImg = (src) => { const paths = Array.isArray(src) src : [src]; ]; paths.forEach((path) => { promise.push(new Promise((resolve, rejeter) => { let img = new Image(); img.crossOrigin = Anonyme; img.src = chemin; img.onload = () => { img.onerror = (err) => { console.log('Le chargement de l'image a échoué ') } })) }); 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 = hauteur*2 let ctx = canvas.getContext(2d) loadImg([imgsrc, src]).then(([img1, img2]) => { ctx.drawImage(img2, 0, 0, largeur*2, hauteur*2) ctx.drawImage(img1, largeur-80, hauteur*2-220, 200, 160) ctx.fillStyle = 'rgba (0,0,0,0.3)'; ctx.fillRect(largeur-80, hauteur*2-60, 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; ctx.fillText('Appuyez longuement pour identifier le code QR', largeur-80, hauteur*2-30, 200, 160) laissez imageURL = canvas.toDataURL (image/png) document.getElementById('mix_img').setAttribute('src',imageURL) })}classe par défaut d'exportation QRcode extends Component { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.