资讯专栏INFORMATION COLUMN

使用JavaScript生成二维码教程-附qrcodejs中文文档

oneasp / 3309人阅读

摘要:使用生成二维码依赖需要使用到的库至此一个简单的二维码就生成了接下来我们就详细了解一下这个库到底为我们提供了哪些参数配置和方法配置名称默认值类型说明显示二维码的元素或该元素的参数配置名称默认值类型说明需要生成的二维码内容图像宽度图像高度前

使用javascript生成二维码 依赖jquery

需要使用到的库

https://github.com/davidshimj...

DIV
javascript
 var qrcode = new QRCode("qrcode");
 
  qrcode.makeCode("http://www.fengkaichang.com");
 

至此一个简单的二维码就生成了

接下来我们就详细了解一下这个库到底为我们提供了哪些参数配置和方法

配置
new  QRCode(element,option)
名称 默认值 类型 说明
element - string 显示二维码的元素或该元素的 ID
option objec 参数配置
名称 默认值 类型 说明
text - string 需要生成的二维码内容
width 256 number 图像宽度
height 256 number 图像高度
colorDark "#000000" string 前景色
colorLight "#ffffff" string 背景色
correctLevel QRCode.CorrectLevel.L 容错级别

容错级别有

QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
var qrcode = new  QRCode(element), {
    text: "www,fengkaichang.com",
    width: 150,
    height: 150,
    colorDark : "#000000",
    colorLight : "#ffffff",
    typeNumber:4,
    correctLevel : QRCode.CorrectLevel.H
});
API方法
qrcode.makeCode(text)    //设置二维码内容
qrcode.clear() //清除二维码。

相关信息 GitHub 中文文档

更多内容请访问我的个人博客www.fengkaichang.com

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89964.html

相关文章

  • vue 2.x项目 vue-qriously 生成维码并下载、cliploard复制粘贴

    摘要:近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接。先想着新模块中是否有生成二维码的插件,看了下。项目中封装了一个指令。一份用来显示的。顺带说一下,复制粘贴复制粘贴老模块中是用的仓库。 近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接。列表每项都有二维码、下载二维码和复制链接和列表上方总的二维码。老模块是用的qrocode中文文档,qrco...

    littlelightss 评论0 收藏0
  • 使用 qrcodejs 生成维码的几个问题

    摘要:在这里的用法如下微信中多个二维码在一起识别错误这个问题,我也遇到了,根据网友的提示,微信是截屏识别的,所以会出现这种问题。示例代码这里代码跟前面脱节了,是另外的结构,仅作为示例代码是类似的一些的汇总对象微信中有两个挨着二维码长按识别的问题 博客地址 Preface 产品希望我这边下载页面加个二维码,可以扫描下载 APP,并且希望二维码中有公司的 logo,很合理的需求,不过实现的时候依...

    Lyux 评论0 收藏0
  • 分享AI有道干货 | 126 篇 AI 原创文章精选(ML、DL、资源、教程

    摘要:值得一提的是每篇文章都是我用心整理的,编者一贯坚持使用通俗形象的语言给我的读者朋友们讲解机器学习深度学习的各个知识点。今天,红色石头特此将以前所有的原创文章整理出来,组成一个比较合理完整的机器学习深度学习的学习路线图,希望能够帮助到大家。 一年多来,公众号【AI有道】已经发布了 140+ 的原创文章了。内容涉及林轩田机器学习课程笔记、吴恩达 deeplearning.ai 课程笔记、机...

    jimhs 评论0 收藏0
  • 关于 webpack 你可能忽略的细节(源码分析)

    摘要:本篇的主要目标是通过实际问题来介绍中容易被人忽略的细节以及源码分析以最新发布的版本的源码为例并且提供几种解决方案。探究原因及源码分析这里以最新发布的版本的源码作为分析。解决方案加参数基于上面简要的分析,我们来尝试下参数的作用。 注:本篇不是入门教程,入门请直接查看官方文档。本篇的主要目标是通过实际问题来介绍 webpack 中容易被人忽略的细节, 以及源码分析(以最新发布的 relea...

    mtunique 评论0 收藏0
  • 优秀文章收藏(慢慢消化)持续更新~

    摘要:整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次,彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<