Código de ejemplo de lienzo para implementar código QR y síntesis de imágenes

En la versión anterior, había una demanda en la calle. Utilice la URL para generar un código QR y luego combínelo con otra imagen para crear una imagen para usted.

1. Utilice jr-qrcode para generar datos de URL: base64 para uso img
2. Luego use el lienzo para combinar las dos imágenes en una sola.

Después de generar la imagen, descubrí que la imagen está muy borrosa. La solución es expandir el lienzo dos veces y exagerar otros parámetros dos veces.

jr-qrcode Puede usar npm install --save jr-qrcode para instalar este paquete

La función es convertir texto a datos: base64 para uso del src de img.

El código es el siguiente.

 importar React, {Componente} de 'react'const qrcode = require('jr-qrcode')const loadImg = (src) => { const paths = Array.isArray(src): [src]; ]; paths.forEach((ruta) => { promesa.push(nueva Promesa((resolver, rechazar) => { let img = nueva Imagen(); img.crossOrigin = Anónimo; img.src = ruta; img.onload = () => { resolver(img }); ') } })) }); return Promise.all(promesa);}const getImageData = (url, src) => { const imgsrc = qrcode.getQrBase64(url) let lienzo = document.createElement('canvas') ancho constante = document.documentElement.clientWidth altura constante = document.documentElement.clientHeight lienzo.ancho = ancho*2 lienzo.alto = alto*2 let ctx = lienzo.getContext(2d) loadImg([imgsrc, src]).luego(([img1, img2]) => { ctx.drawImage(img2, 0, 0, ancho*2, alto*2) ctx.drawImage(img1, ancho-80, alto*2-220, 200, 160) ctx.fillStyle = 'rgba (0,0,0,0.3)'; ctx.fillRect(ancho-80, alto*2-60, 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; ctx.fillText('Mantenga pulsado para identificar el código QR', ancho-80, alto*2-30, 200, 160) let imageURL = lienzo.toDataURL(imagen/png) document.getElementById('mix_img').setAttribute('src',imageURL) })}exportar código QR de clase predeterminada extiende Componente { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.