QRコードと画像合成を実装するキャンバスのサンプルコード

以前のバージョンでは、URL を使用して QR コードを生成し、それを別の画像と組み合わせて画像を作成することができました。

1. jr-qrcode を使用して URL データを生成します: 画像用に Base64
2. 次に、キャンバスを使用して 2 つの写真を 1 つの写真に結合します。

画像を生成した後、画像が非常にぼやけていることがわかりました。解決するには、キャンバスを 2 倍に拡大し、他のパラメータを 2 倍に誇張します。

jr-qrcode npm install --save jr-qrcode を使用してこのパッケージをインストールできます

この機能は、img の src で使用できるようにテキストを data:base64 に変換することです。

コードは次のとおりです

 import React, { コンポーネント } from 'react'const qrcode = require('jr-qrcode')constloadImg = (src) => { const paths = Array.isArray(src) src : [src] ? ]; paths.forEach((path) => {promise.push(new Promise((解決、拒否) => { let img = new Image(); img.crossOrigin = パス; img.onload = () => { img.onerror = (err) => { イメージの読み込みに失敗しました') } })) }); 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(幅-80、高さ*2-60、 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; ctx.fillText('長押ししてQRコードを識別', 幅-80, 高さ*2-30, 200, 160) imageURL = Canvas.toDataURL(image/png) にしますdocument.getElementById('mix_img').setAttribute('src',imageURL) })}export デフォルト クラス QRcode extends Component { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。