使用JS生成二维码QRCode

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

这其实很简单,项目中使用插件即可生成,主要有两种方式:

一种是在项目中使用java生成,把图片生成到某个目录,然后在用tomcat或者nginx虚拟一下路径即可访问,这种方式我们不用,因为会在目录中生成图片,没有必

第二张方式是使用js来生成,用jquery.qrcode.js即可

https://github.com/jeromeetienne/jquery-qrcode

这是github地址下载后引入jquery.min.js以及jquery.qrcode.min.js到工程中

页面上配置如下

<div id="code"></div> 

然后在js中生成即可

$('#code').qrcode($("#qrCodeUrl").val());

最终效果:

 

相关文章
|
编解码 JavaScript 前端开发
jsQR 一个完全独立的javascript 二维码识别库
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
jsQR 一个完全独立的javascript 二维码识别库
|
JavaScript API
Node.js:浏览器环境下使用qrcode生成二维码
Node.js:浏览器环境下使用qrcode生成二维码
615 0
Node.js:浏览器环境下使用qrcode生成二维码
|
9月前
|
JavaScript 前端开发
JavaScript实现识别二维码信息功能
JavaScript实现识别二维码信息功能
141 1
|
9月前
|
JavaScript
js生成二维码点击可放大
js生成二维码点击可放大
|
9月前
|
JavaScript
js生成二维码和解析二维码
js生成二维码和解析二维码
134 0
|
JavaScript
js生成二维码和解析二维码
js生成二维码和解析二维码
183 0
QRCode.js生成二维码
QRCode.js生成二维码
101 0
QRCode.js生成二维码
|
Web App开发 JavaScript 前端开发
QRCode.js:使用 JavaScript 生成二维码
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
2004 0
|
Web App开发 移动开发 前端开发
javascript生成二维码
javascript生成二维码
javascript生成二维码

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    40
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    Node.js 中实现多任务下载的并发控制策略
    32
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    46
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    54
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55