Maison > Article > interface Web > Comment Canvas implémente le code pour le code QR et la synthèse d'images
Cet article présente principalement le code sur la façon d'implémenter le code QR et la synthèse d'images sur toile. Le contenu a une certaine valeur de référence. J'espère qu'il pourra aider les amis dans le besoin.
La version précédente recevait une demande d'utilisation d'une URL pour générer un code QR, puis de la combiner avec une autre image pour créer une image.
L'idée de mise en œuvre est la suivante
Utilisez jr-qrcode pour générer des données URL : base64 pour img à utiliser
Ensuite, utilisez Canvas pour combiner les deux Combiner deux images en une seule
Problèmes rencontrés
Après avoir généré l'image, j'ai trouvé que l'image est très floue La solution est. pour doubler la toile. Autres Exagérez simplement les paramètres deux fois
jr-qrcode Vous pouvez utiliser npm install --save jr-qrcode pour installer ce package
La fonction est de convertir du texte en données : base64 pour img Le code src utilisant
est le suivant
import React, { Component } from 'react' const qrcode = require('jr-qrcode') const loadImg = (src) => { const paths = Array.isArray(src) ? src : [src]; const promise = []; paths.forEach((path) => { promise.push(new Promise((resolve, reject) => { let img = new Image(); img.crossOrigin = "Anonymous"; img.src = path; img.onload = () => { resolve(img); }; img.onerror = (err) => { console.log('图片加载失败') } })) }); 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('长按识别二维码', width-80, height*2-30, 200, 160) let imageURL = canvas.toDataURL("image/png") document.getElementById('mix_img').setAttribute('src',imageURL) }) } export default class QRcode extends Component { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( <p> <img alt='mix_img' id='mix_img'/> </p> ) } }
Recommandations associées :
HTML5 Canvas pour implémenter un plan interactif des lignes de métro
Développement H5 : détails du jeu de destruction d'étoiles
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!