Exemplo de código para canvas para implementar código QR e síntese de imagem

Na versão anterior havia uma demanda na rua Use a URL para gerar um código QR e depois combine-o com outra imagem para criar uma imagem para você.

1. Use jr-qrcode para gerar dados de URL: base64 para uso img
2. Em seguida, use a tela para combinar as duas imagens em uma imagem

Depois de gerar a imagem, descobri que a imagem está muito borrada. A solução é expandir a tela duas vezes e exagerar os outros parâmetros duas vezes.

jr-qrcode Você pode usar npm install --save jr-qrcode para instalar este pacote

A função é converter texto em data:base64 para uso pelo src do img

O código é o seguinte

 importar React, { Componente } de 'react'const qrcode = require('jr-qrcode')const loadImg = (src) => { const paths = Array.isArray(src) : [src]; ]; paths.forEach((path) => { promessa.push(new Promise((resolver, rejeitar) => { let img = new Image(); img.crossOrigin = Anônimo; img.src = path; img.onload = () => { resolve(img }); ') } })) }); 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, largura*2, altura*2) ctx.drawImage(img1, largura-80, altura*2-220, 200, 160) ctx.fillStyle = 'rgba (0,0,0,0,3)';ctx.fillRect(largura-80, altura*2-60, 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; 160) deixe imageURL = canvas.toDataURL(image/png) document.getElementById('mix_img').setAttribute('src',imageURL) })}exportar classe padrão QRcode estende Componente { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.