js生成二维码

QRcode npm 地址

1.安装qrcode

//在项目文件夹中执行：

npm install --save qrcode

//或者，将其全局安装以使用qrcode命令行来保存qrcode图像或生成可在终端中查看的图像。

npm install -g qrcode

2.用法

  • CLI

　　

Usage: qrcode [options] <input string>

QR Code options:

  -v, --version  QR Code symbol version (1 - 40)

  -e, --error    Error correction level            [choices: "L", "M", "Q", "H"]

  -m, --mask     Mask pattern (0 - 7)

Renderer options:

  -t, --type        Output type                  [choices: "png", "svg", "utf8"]

  -w, --width       Image width (px)

  -s, --scale       Scale factor

  -q, --qzone       Quiet zone size

  -l, --lightcolor  Light RGBA hex color

  -d, --darkcolor   Dark RGBA hex color

Options:

  -o, --output  Output file

  -h, --help    Show help                                              [boolean]

Examples:

  qrcode "some text"                    Draw in terminal window

  qrcode -o out.png "some text"         Save as png image

  qrcode -d F00 -o out.png "some text"  Use red as foreground color
  • 模块使用
<!-- index.html -->

<html>

  <body>

    <canvas id="canvas"></canvas>

    <script src="bundle.js"></script>

  </body>

</html>

// index.js -> bundle.js

var QRCode = require('qrcode')

var canvas = document.getElementById('canvas')

QRCode.toCanvas(canvas, 'sample text', function (error) {

  if (error) console.error(error)

  console.log('success!');

})
  • nodejs使用
var QRCode = require('qrcode')

QRCode.toDataURL('I am a pony!', function (err, url) {

  console.log(url)

})
  • es6/es7
//可以使用Promises和Async / Await来代替回调函数。

import QRCode from 'qrcode'

// With promises

QRCode.toDataURL('I am a pony!')

  .then(url => {

    console.log(url)

  })

  .catch(err => {

    console.error(err)

  })

// With async/await

const generateQR = async text => {

  try {

    console.log(await QRCode.toDataURL(text))

  } catch (err) {

    console.error(err)

  }

}

js生成二维码 qrcode的更多相关文章

  1. 使用JS生成二维码QRCode

    这其实很简单,项目中使用插件即可生成,主要有两种方式: 一种是在项目中使用java生成,把图片生成到某个目录,然后在用tomcat或者nginx虚拟一下路径即可访问,这种方式我们不用,因为会在目录中生 ...

  2. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  3. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  4. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  5. qrcode.js生成二维码因字符串过长而报错

    前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...

  6. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

  7. php--------使用js生成二维码

    php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...

  8. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  9. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

随机推荐

  1. debugging kubernetes (Delve and Goland)

    1. Build from source cd GOPATH mkdir k8s.io cd k8s.io git clone https://github.com/kubernetes/kubern ...

  2. MySQL相关问题题

    1.truncate.delete.drop的区别 (1)truncate.drop是不可以rollback的,但是delete是可以rollback的.DELETE语句执行删除的过程是每次从表中删除 ...

  3. vue-cli配置

    转载--https://www.cnblogs.com/caideyipi/p/8187656.html 手撕vue-cli配置文件——config篇   最近一直在研究webpack,突然想看看vu ...

  4. java字符串对象存储机制

    String s1="abc";创建了几个String对象 ? String s2 = new String("abc");创建了几个String对象? s1= ...

  5. Oracle rac 监听状态异常远程连接问题解决（TNS-12541 TNS-12560 TNS-00511 Linux Error：111 ORA-12502）

    问题1现象 数据导出脚本执行失败,报错如下 ORA-12537 到服务器上查看,报错: [oracle@test ~]$ lsnrctl status LSNRCTL - Production on ...

  6. spring-petclinic性能调优实战（转）

    1.spring-petclinic介绍 spring-petclinic是spring官方做的一个宠物商店,结合了spring和其他一些框架的最佳实践. 架构如下: 1)前端 Thymeleaf做H ...

  7. main函数的的两个参数

    C语言中main函数的参数有两个,这两个参数写为argc和argv.因此,main函数的函数头可写为:main(argc,argv);C语言还规定argc(第一个形参)必须是整型变量,argv( 第二 ...

  8. Page.Cache

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.page.cache?view=netframework-4.8 Gets the ...

  9. Caffe+CUDA8.0+CuDNNv5.1+OpenCV3.1+Ubuntu14.04 配置参考文献 以及 常见编译问题总结

    Caffe + CUDA8.0 + CuDNNv5.1 + OpenCV3.1 + Ubuntu14.04  配置参考文献 ---- Wang Xiao  Anhui University  CVPR ...

  10. Xilinx FPGA DPR技术

    动态部分重配置技术 DPR(Dynamic Partial Reconfiguration)可以使得PL的一个部分或几个部分在运行时刻被完全地重新配置.这些部分需要被指定为可重配置分区(Reconfi ...