Saturday, February 27, 2021
  • Setup menu at Appearance » Menus and assign menu to Top Bar Navigation
Advertisement
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
No Result
View All Result
Home Learn to Code

How to Create a QR Code

October 15, 2019
in Learn to Code
How to Create a QR Code
586
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter

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: node-qrcode. Let’s look at the different wys and output formats you can use to create a QR code!

You might also like

How to Install a NPM Module from GitHub Branch

How to Push to a Git Remote Branch of a Different Name

Fix “no such file or directory, scandir”

Start by installing the library:

yarn add qrcode

Create QR Code Image Data

With the QR code utility available, you can generate a data URI for the QR code which you can use with an <img> element:

const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

generateQR("https://davidwalsh.name");

/*
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==
*/

Create a QR Code in Terminal

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)
  }
}

Create a QR Code Image

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)
  }
}

Create a QR Code on Canvas

If you use a utility like Browserify and webpack, you can use qrcode 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("https://davidwalsh.name");

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 node-qr code!

Credit: DavidWalsh By: David Walsh

Previous Post

Is mind-reading tech your next big security nightmare? Yes, but not in the way you might expect

Next Post

3 ways to take back control from PPC automations

Related Posts

How to Change the WordPress Admin Login Logo
Learn to Code

How to Install a NPM Module from GitHub Branch

February 12, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

How to Push to a Git Remote Branch of a Different Name

February 9, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Fix “no such file or directory, scandir”

February 8, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Confessions of a Web Developer XVIII

February 3, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

JavaScript Wake Lock API

January 25, 2021
Next Post
3 ways to take back control from PPC automations

3 ways to take back control from PPC automations

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

January 6, 2019
Microsoft, Google Use Artificial Intelligence to Fight Hackers

Microsoft, Google Use Artificial Intelligence to Fight Hackers

January 6, 2019

Categories

  • Artificial Intelligence
  • Big Data
  • Blockchain
  • Crypto News
  • Data Science
  • Digital Marketing
  • Internet Privacy
  • Internet Security
  • Learn to Code
  • Machine Learning
  • Marketing Technology
  • Neural Networks
  • Technology Companies

Don't miss it

MindMed Closes Acquisition of HealthMode, a Leading Machine Learning Digital Medicine Company
Machine Learning

MindMed Closes Acquisition of HealthMode, a Leading Machine Learning Digital Medicine Company

February 27, 2021
How AI Can Be Used in Agriculture Sector for Higher Productivity? | by ANOLYTICS
Neural Networks

How AI Can Be Used in Agriculture Sector for Higher Productivity? | by ANOLYTICS

February 27, 2021
Berlin resident jailed for threatening to bomb NHS hospital unless Bitcoin ransom was paid
Internet Security

Berlin resident jailed for threatening to bomb NHS hospital unless Bitcoin ransom was paid

February 27, 2021
The Ethereum Virtual Machine (EVM)
Data Science

The Ethereum Virtual Machine (EVM)

February 27, 2021
Healthcare leaders debunk 3 myths about machine learning
Machine Learning

Providence exec explains the differences, their healthcare applications

February 27, 2021
Future Tech: Artificial Intelligence and the Singularity | by Jason Sherman | Feb, 2021
Neural Networks

Future Tech: Artificial Intelligence and the Singularity | by Jason Sherman | Feb, 2021

February 27, 2021
NikolaNews

NikolaNews.com is an online News Portal which aims to share news about blockchain, AI, Big Data, and Data Privacy and more!

What’s New Here?

  • MindMed Closes Acquisition of HealthMode, a Leading Machine Learning Digital Medicine Company February 27, 2021
  • How AI Can Be Used in Agriculture Sector for Higher Productivity? | by ANOLYTICS February 27, 2021
  • Berlin resident jailed for threatening to bomb NHS hospital unless Bitcoin ransom was paid February 27, 2021
  • The Ethereum Virtual Machine (EVM) February 27, 2021

Subscribe to get more!

© 2019 NikolaNews.com - Global Tech Updates

No Result
View All Result
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News

© 2019 NikolaNews.com - Global Tech Updates