如何创建二维码

发布于:2021-01-14 15:38:09

0

2404

0

二维码 JavaScript

不是每个人都喜欢二维码,但我很喜欢。如果我以后看到想要记住的东西或要查看的东西,尤其是在路上,拍一张快速照片非常容易——这比试图记住一个URL要容易得多,也比在一个小键盘上键入要快得多。

如果你需要为客户或你自己生成二维码,有一个非常好的JavaScript项目:node-qrcode。让我们看看你可以用不同的方式和输出格式来创建一个QR码!

开始安装库:

yarn add qrcode

创建二维码图像数据

随着QR码实用程序可用,您可以生成一个数据URI的QR码,您可以使用<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/IOZfx1mymGmHGbKYaYcZsphphxmymGmHGbKYaYcZsphphxmymGmHGbKh4eS8JNUWhKayh1JaCotCU3ljiT8JJUnDjP lMFMOM+XDy1TelIQ7ktBUrqi0JNyRhKZyReVNSXjTYaYcZsphpnz4siTcofKbqHxTEu5Q+abDTDnMlMNM+fCXU2lJaEloKnckoak0lf+Tw0w5z JTDTPnwl0vCFZWWhKbyRBKayt/sMFMOM+UwUz58mco3qVxJQlP5TVR+k8NMOcyUw0z58LIk/KQkNJU7ktBUWhLelITf7DBTDjPlMFM+PKTyX1 JpSWgqdyThTSp/k8NMOcyUw0z58FASmsqVJPykJDSVKyotCXckoalcSUJTaUm4Q+WJw0w5zJTDTIl/8EVJuKLSktBUnkhCU2lJeELljiS8SeV Nh5lymCmHmRL/4Acl4YpKS0JTuSMJTeVKEppKS8ITKi0JV1SuJKGpPHGYKYeZcpgp8Q9elIQrKi0JV1RaEppKS0JT+aYkNJWWhCsqLQlPqDxxm CmHmXKYKR8eSkJTuUOlJaEl4Q6VloSm0pLQVK4k4ZtU7kjCmw4z5TBTDjMl/sEDSXhC5Y4kXFFpSWgqV5LwJpUrSWgqV5LQVN50mCmHmXKYKR+ +TOWOJHxTEu5QaUloKi0JLQlN5UoS7khCU3niMFMOM+UwUz68TKUloam0JDSVK0m4Q6Uloam8SeVKEppKS8IVlZaENx1mymGmHGZK/IMHktBUW hKuqFxJwhMqdyShqbQkfJNKS8IVlTcdZsphphxmyoeHVK6oPKFyJQlN5UoSvknljiT8JoeZcpgph5ny4aEk/CSVK0m4Q6Ul4YpKS8KVJDSVO1 SuJKGpPHGYKYeZcpgpH16m8qYkvEmlJeGOJNyh8qYkNJU3HWbKYaYcZsqHL0vCHSpPqLQk3KHSknBHEn5SEprKE4eZcpgph5ny4X9O5YrKHSot CXeo/GaHmXKYKYeZ8uEvp9KS0FSuJKGpNJUrKi0JTeVKEn6Tw0w5zJTDTPnwZSr/pSQ0laZyJQlN5YkkXFFpSfhJh5lymCmHmfLhZUn4SUm4on IlCU8koam0JDSVK0loKleS8KbDTDnMlMNMiX8w86/DTDnMlMNMOcyUw0w5zJTDTDnMlMNMOcyUw0w5zJTDTDnMlMNM+Qeve5EOUrEhtwAAAABJR U5ErkJggg== */

在终端中创建一个二维码

如果你想通过Node看到终端上的二维码。你可以通过传递一个config对象来实现:

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

{xunruicms_img_title}

创建一个二维码图像

你可以生成一个PNG, SVG,或UTF8图像的二维码:

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

在画布上创建一个二维码

如果你使用像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");

这个很棒的二维码库还允许你创建比我在这里展示的更多的东西,包括二进制数据和各种选项。如果你需要创建一个QR码,看看node-qr码就知道了!