Home
Forums
New posts
Search forums
What's new
New posts
New resources
New profile posts
Latest activity
Resources
Latest reviews
Search resources
Members
Current visitors
New profile posts
Search profile posts
DMCA Policy
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
FEEL FREE TO SHARE TUTORIALS, YOUR SKILS & KNOWLEDGE ON CODING, SCRIPTS, THEMES, PLUGINS OR ANY RESOURCES YOU HAVE WITH THE COMMUNITY-
Click Here To Post Your Request,
JOIN COMPUTER REPAIR FORUM
Home
Forums
TUTORIALS
CODING TUTORIALS
Node.js
How to Create a QR Code
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="codeguru" data-source="post: 67" data-attributes="member: 2"><p><img src="https://davidwalsh.name/demo/2019/10/davidwash-qr-code.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> QR codes aren’t everyone’s cup of tea but I quite like them. If I see something I want to remember or check out later, especially when on the road, it’s super easy to take a quick picture — it’s much easier than trying to remember a URL and much faster than typing it in on a tiny keyboard.</p><p></p><p>If you need to generate QR codes, for a client or yourself, there’s a really nice JavaScript project: <a href="https://github.com/soldair/node-qrcode" target="_blank">node-qrcode</a>. Let’s look at the different wys and output formats you can use to create a QR code!</p><p></p><p>Start by installing the library:</p><p></p><p>[ICODE]yarn add qrcode[/ICODE]</p><p></p><h2>Create QR Code Image Data</h2><p></p><p>With the QR code utility available, you can generate a data URI for the QR code which you can use with an [ICODE]<img>[/ICODE] element:</p><p></p><p>const generateQR = async text => {</p><p> try {</p><p> console.log(await QRCode.toDataURL(text))</p><p> } catch (err) {</p><p> console.error(err)</p><p> }</p><p>}</p><p></p><p>generateQR("<a href="https://davidwalsh.name" target="_blank">https://davidwalsh.name</a>");</p><p></p><p>/*</p><p>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAAAklEQVR4AewaftIAAAOMSURBVO3BQY7kRgADwWSh///l9B584EmAIPV41mBE/IOZfx1mymGmHGbKYaYcZsphphxmymGmHGbKYaYcZsphphxmymGmHGbKh4eS8JNUWhKayh1JaCotCU3ljiT8JJUnDjPlMFMOM+XDy1TelIQ7ktBUrqi0JNyRhKZyReVNSXjTYaYcZsphpnz4siTcofKbqHxTEu5Q+abDTDnMlMNM+fCXU2lJaEloKnckoak0lf+Tw0w5zJTDTPnwl0vCFZWWhKbyRBKayt/sMFMOM+UwUz58mco3qVxJQlP5TVR+k8NMOcyUw0z58LIk/KQkNJU7ktBUWhLelITf7DBTDjPlMFM+PKTyX1JpSWgqdyThTSp/k8NMOcyUw0z58FASmsqVJPykJDSVKyotCXckoalcSUJTaUm4Q+WJw0w5zJTDTIl/8EVJuKLSktBUnkhCU2lJeELljiS8SeVNh5lymCmHmRL/4Acl4YpKS0JTuSMJTeVKEppKS8ITKi0JV1SuJKGpPHGYKYeZcpgp8Q9elIQrKi0JV1RaEppKS0JT+aYkNJWWhCsqLQlPqDxxmCmHmXKYKR8eSkJTuUOlJaEl4Q6VloSm0pLQVK4k4ZtU7kjCmw4z5TBTDjMl/sEDSXhC5Y4kXFFpSWgqV5LwJpUrSWgqV5LQVN50mCmHmXKYKR++TOWOJHxTEu5QaUloKi0JLQlN5UoS7khCU3niMFMOM+UwUz68TKUloam0JDSVK0m4Q6Uloam8SeVKEppKS8IVlZaENx1mymGmHGZK/IMHktBUWhKuqFxJwhMqdyShqbQkfJNKS8IVlTcdZsphphxmyoeHVK6oPKFyJQlN5UoSvknljiT8JoeZcpgph5ny4aEk/CSVK0m4Q6Ul4YpKS8KVJDSVO1SuJKGpPHGYKYeZcpgpH16m8qYkvEmlJeGOJNyh8qYkNJU3HWbKYaYcZsqHL0vCHSpPqLQk3KHSknBHEn5SEprKE4eZcpgph5ny4X9O5YrKHSotCXeo/GaHmXKYKYeZ8uEvp9KS0FSuJKGpNJUrKi0JTeVKEn6Tw0w5zJTDTPnwZSr/pSQ0laZyJQlN5YkkXFFpSfhJh5lymCmHmfLhZUn4SUm4onIlCU8koam0JDSVK0loKleS8KbDTDnMlMNMiX8w86/DTDnMlMNMOcyUw0w5zJTDTDnMlMNMOcyUw0w5zJTDTDnMlMNM+Qeve5EOUrEhtwAAAABJRU5ErkJggg==</p><p>*/</p><p></p><h2>Create a QR Code in Terminal</h2><p></p><p>If you want to see the QR code in the terminal via Node.js, you can do so by passing a config object:</p><p></p><p>const generateQR = async text => {</p><p> try {</p><p> console.log(await QRCode.toString(text, {type: 'terminal'}))</p><p> } catch (err) {</p><p> console.error(err)</p><p> }</p><p>}</p><p></p><p><img src="https://davidwalsh.name/demo/2019/10/qr-code-terminal-1024x646.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><h2>Create a QR Code Image</h2><p></p><p>You can generate a PNG, SVG, or UTF8 image for the QR code:</p><p></p><p>const generateQR = async text => {</p><p> try {</p><p> await QRCode.toFile('./davidwash-qr-code.png', text);</p><p> } catch (err) {</p><p> console.error(err)</p><p> }</p><p>}</p><p></p><h2>Create a QR Code on Canvas</h2><p></p><p>If you use a utility like Browserify and webpack, you can use [ICODE]qrcode[/ICODE] on the client side:</p><p></p><p>var canvas = document.getElementById('canvas');</p><p>const generateQR = async text => {</p><p> try {</p><p> await QRCode.toCanvas(canvas, text)</p><p> } catch (err) {</p><p> console.error(err)</p><p> }</p><p>}</p><p></p><p>generateQR("<a href="https://davidwalsh.name" target="_blank">https://davidwalsh.name</a>");</p><p></p><p></p><p>This awesome QR code library also allows you to create much more than I’ve shown here, including binary data and with a variety of options. If you need to create a QR code, look no further than <a href="https://github.com/soldair/node-qrcode" target="_blank">node-qr</a> code!</p><p></p><p>The post <a href="https://davidwalsh.name/create-qr-code" target="_blank">How to Create a QR Code</a> appeared first on <a href="https://davidwalsh.name" target="_blank">David Walsh Blog</a>.</p><p></p><p><a href="https://tkjs.us/dwb" target="_blank"><img src="https://davidwalsh.name/demo/tjs_block-1.svg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a></p><p></p><p><a href="https://davidwalsh.name/create-qr-code" target="_blank">Continue reading...</a></p></blockquote><p></p>
[QUOTE="codeguru, post: 67, member: 2"] [IMG]https://davidwalsh.name/demo/2019/10/davidwash-qr-code.png[/IMG] QR codes aren’t everyone’s cup of tea but I quite like them. If I see something I want to remember or check out later, especially when on the road, it’s super easy to take a quick picture — it’s much easier than trying to remember a URL and much faster than typing it in on a tiny keyboard. If you need to generate QR codes, for a client or yourself, there’s a really nice JavaScript project: [URL='https://github.com/soldair/node-qrcode']node-qrcode[/URL]. Let’s look at the different wys and output formats you can use to create a QR code! Start by installing the library: [ICODE]yarn add qrcode[/ICODE] [HEADING=1]Create QR Code Image Data[/HEADING] With the QR code utility available, you can generate a data URI for the QR code which you can use with an [ICODE]<img>[/ICODE] element: const generateQR = async text => { try { console.log(await QRCode.toDataURL(text)) } catch (err) { console.error(err) } } generateQR("[URL]https://davidwalsh.name[/URL]"); /* data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAAAklEQVR4AewaftIAAAOMSURBVO3BQY7kRgADwWSh///l9B584EmAIPV41mBE/IOZfx1mymGmHGbKYaYcZsphphxmymGmHGbKYaYcZsphphxmymGmHGbKh4eS8JNUWhKayh1JaCotCU3ljiT8JJUnDjPlMFMOM+XDy1TelIQ7ktBUrqi0JNyRhKZyReVNSXjTYaYcZsphpnz4siTcofKbqHxTEu5Q+abDTDnMlMNM+fCXU2lJaEloKnckoak0lf+Tw0w5zJTDTPnwl0vCFZWWhKbyRBKayt/sMFMOM+UwUz58mco3qVxJQlP5TVR+k8NMOcyUw0z58LIk/KQkNJU7ktBUWhLelITf7DBTDjPlMFM+PKTyX1JpSWgqdyThTSp/k8NMOcyUw0z58FASmsqVJPykJDSVKyotCXckoalcSUJTaUm4Q+WJw0w5zJTDTIl/8EVJuKLSktBUnkhCU2lJeELljiS8SeVNh5lymCmHmRL/4Acl4YpKS0JTuSMJTeVKEppKS8ITKi0JV1SuJKGpPHGYKYeZcpgp8Q9elIQrKi0JV1RaEppKS0JT+aYkNJWWhCsqLQlPqDxxmCmHmXKYKR8eSkJTuUOlJaEl4Q6VloSm0pLQVK4k4ZtU7kjCmw4z5TBTDjMl/sEDSXhC5Y4kXFFpSWgqV5LwJpUrSWgqV5LQVN50mCmHmXKYKR++TOWOJHxTEu5QaUloKi0JLQlN5UoS7khCU3niMFMOM+UwUz68TKUloam0JDSVK0m4Q6Uloam8SeVKEppKS8IVlZaENx1mymGmHGZK/IMHktBUWhKuqFxJwhMqdyShqbQkfJNKS8IVlTcdZsphphxmyoeHVK6oPKFyJQlN5UoSvknljiT8JoeZcpgph5ny4aEk/CSVK0m4Q6Ul4YpKS8KVJDSVO1SuJKGpPHGYKYeZcpgpH16m8qYkvEmlJeGOJNyh8qYkNJU3HWbKYaYcZsqHL0vCHSpPqLQk3KHSknBHEn5SEprKE4eZcpgph5ny4X9O5YrKHSotCXeo/GaHmXKYKYeZ8uEvp9KS0FSuJKGpNJUrKi0JTeVKEn6Tw0w5zJTDTPnwZSr/pSQ0laZyJQlN5YkkXFFpSfhJh5lymCmHmfLhZUn4SUm4onIlCU8koam0JDSVK0loKleS8KbDTDnMlMNMiX8w86/DTDnMlMNMOcyUw0w5zJTDTDnMlMNMOcyUw0w5zJTDTDnMlMNM+Qeve5EOUrEhtwAAAABJRU5ErkJggg== */ [HEADING=1]Create a QR Code in Terminal[/HEADING] If you want to see the QR code in the terminal via Node.js, you can do so by passing a config object: const generateQR = async text => { try { console.log(await QRCode.toString(text, {type: 'terminal'})) } catch (err) { console.error(err) } } [IMG]https://davidwalsh.name/demo/2019/10/qr-code-terminal-1024x646.png[/IMG] [HEADING=1]Create a QR Code Image[/HEADING] You can generate a PNG, SVG, or UTF8 image for the QR code: const generateQR = async text => { try { await QRCode.toFile('./davidwash-qr-code.png', text); } catch (err) { console.error(err) } } [HEADING=1]Create a QR Code on Canvas[/HEADING] If you use a utility like Browserify and webpack, you can use [ICODE]qrcode[/ICODE] on the client side: var canvas = document.getElementById('canvas'); const generateQR = async text => { try { await QRCode.toCanvas(canvas, text) } catch (err) { console.error(err) } } generateQR("[URL]https://davidwalsh.name[/URL]"); This awesome QR code library also allows you to create much more than I’ve shown here, including binary data and with a variety of options. If you need to create a QR code, look no further than [URL='https://github.com/soldair/node-qrcode']node-qr[/URL] code! The post [URL='https://davidwalsh.name/create-qr-code']How to Create a QR Code[/URL] appeared first on [URL='https://davidwalsh.name']David Walsh Blog[/URL]. [URL='https://tkjs.us/dwb'][IMG]https://davidwalsh.name/demo/tjs_block-1.svg[/IMG][/URL] [url="https://davidwalsh.name/create-qr-code"]Continue reading...[/url] [/QUOTE]
Insert quotes…
Verification
Post reply
Richest Freecoded User
Most Freecoin
freecoded
4,838 Freecoin
Davy200
590 Freecoin
J
Johnhendrick
575 Freecoin
S
Smith16
527 Freecoin
nathan69
426 Freecoin
Laureine
415 Freecoin
A
anajeen
370 Freecoin
C
codeguru
287 Freecoin
Tekera
267 Freecoin
A
Akubay
170 Freecoin
Home
Forums
TUTORIALS
CODING TUTORIALS
Node.js
How to Create a QR Code
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.
Accept
Learn more…
Top