Node.js:浏览器环境下使用qrcode生成二维码

简介: Node.js:浏览器环境下使用qrcode生成二维码

Node.js

安装

npm i qrcode

API


toDataURL(text, [options], [cb(error, url)])
## 参数:
text String|Array
options: {
    version Type: Number
    errorCorrectionLevel Type: String Default: M
    # low, medium, quartile, high or L, M, Q, H
    maskPattern Type: Number
    # 0, 1, 2, 3, 4, 5, 6, 7.
    toSJISFunc Type: Function
    type Type: String Default: image/png
    # image/png, image/jpeg, image/webp
    quality Type: Number Default: 0.92
    # Renderers options
    margin  Type: Number Default: 4
    scale   Type: Number Default: 4
    width   Type: Number
    color: {
        dark  Type: String Default: #000000ff
        light Type: String Default: #ffffffff
    }
}
cb Type: Function

使用示例

import QRCode from 'qrcode'
// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

生成的二维码(边框和文字是我加的)

image.png


Browser

配合jquery使用


<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<script>
$(document).ready(function () {
        QRCode.toDataURL(window.location.href, { errorCorrectionLevel: 'H' }, function (err, url) {
            // console.log('QRCode', url)
            $('#weixin-code').attr('src', url)
        })
    });
</script>

相关文章
|
18天前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
25 1
|
2月前
|
JavaScript 开发者
什么是浏览器环境下事件的 Propagation
什么是浏览器环境下事件的 Propagation
49 1
|
11天前
|
开发框架 JavaScript 中间件
node+express搭建服务器环境
node+express搭建服务器环境
node+express搭建服务器环境
|
1天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
4天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4
|
11天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
16天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
20 3
|
1月前
|
JavaScript 前端开发 开发者
如果你想在钉钉环境中运行JavaScript脚本
【2月更文挑战第17天】如果你想在钉钉环境中运行JavaScript脚本
34 6
|
2月前
|
JavaScript 前端开发 开发工具
Python之JavaScript逆向系列——3、浏览器的开发工具——源代码的使用
Python之JavaScript逆向系列——3、浏览器的开发工具——源代码的使用
17 0