qr码是二维码码_如何创建QR码

我会带着你远行 2023-02-21 14:24 22阅读 0赞

qr码是二维码码

![format_png][] 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!

如果您需要为客户或您自己生成QR码，那么有一个非常不错JavaScript项目： [node-qrcode][] 。 让我们看看可用于创建QR码的不同wys和输出格式！

Start by installing the library:

首先安装库：

`yarn add qrcode`

## 创建QR码图像数据 **(**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:

使用可用的QR码实用程序，可以为QR码生成数据URI，可以将其与`<img>`元素一起使用：

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

## 在终端中创建QR码 **(**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:

如果您想通过Node.js在终端中查看QR码，可以通过传递一个config对象来实现：

const generateQR = async text => {
      try {
        console.log(await QRCode.toString(text, {type: 'terminal'}))
      } catch (err) {
        console.error(err)
      }
    }

![format_png 1][]

## 创建二维码图像 **(**Create a QR Code Image**)** ##

You can generate a PNG, SVG, or UTF8 image for the QR code:

您可以为QR码生成PNG，SVG或UTF8图像：

const generateQR = async text => {
      try {
        await QRCode.toFile('./davidwash-qr-code.png', text);
      } catch (err) {
        console.error(err)
      }
    }

## 在画布上创建QR码 **(**Create a QR Code on Canvas**)** ##

If you use a utility like Browserify and webpack, you can use `qrcode` on the client side:

如果使用Browserify和webpack之类的实用程序，则可以在客户端使用`qrcode` ：

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][node-qrcode] code!

这个很棒的QR代码库还允许您创建比我在这里显示的更多的内容，包括二进制数据和多种选择。 如果您需要创建QR码，请不要超过[node-qr][node-qrcode]码！

> 翻译自: [https://davidwalsh.name/create-qr-code][https_davidwalsh.name_create-qr-code]

qr码是二维码码

[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby8yMDE5LzEwL2Rhdmlkd2FzaC1xci1jb2RlLnBuZw?x-oss-process=image/format,png
[node-qrcode]: https://github.com/soldair/node-qrcode
[format_png 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby8yMDE5LzEwL3FyLWNvZGUtdGVybWluYWwtMTAyNHg2NDYucG5n?x-oss-process=image/format,png
[https_davidwalsh.name_create-qr-code]: https://davidwalsh.name/create-qr-code