js生成二维码的示例代码

2024-04-25 08:17:23

前段时间项目中需要开发扫描二维码查看信息的功能，在网上查了一些资料，把用过的方法进行总结需要导入一个qrcode的js 插件。

插件链接: qrcode.js下载地址，点击即可下载

一、一个简单的示例

如下：（仅供参考）

<%--
 Created by IntelliJ IDEA.
 User: ASUS
 author:xumz
 Date: 2021/2/27
 Time: 10:33
 搬运请备注
 To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
 <script charset='utf-8' type='text/javascript' src='js/jquery-1.11.0.js'></script>
 <script src="js/qrcode.min.js" type="text/javascript"></script>
</head>
<body>

<h1>输入URL以生成二维码</h1>
<div>
 <label for="qr_link">URL:</label>
 <input id="qr_link" type="text" value="hello er wei ma !!" style="width:460px;"/>
 <input type="button" id="qr_creat" value="生成">
 <p>生成的二维码可以通过手机任意扫描工具，查看其二维码信息</p>
 <br/>
</div>
<br>
<div id="qr_container" style="margin:auto; position:relative;"></div>

<script type="text/javascript">
 //点击生成按钮以后
 document.getElementById("qr_creat").onclick = function() {
  var qrcode = new QRCode(  //实例化生成二维码
   document.getElementById("qr_container"), {//二维码存放的div
    width: 160, //设置宽高
    height: 160,
   }

  );

  //根据input框的值生成二维码
  qrcode.makeCode($('#qr_link').val());
  $("#qr_container").append("<br><br>"); //换行
 }
</script>

</body>
</html>

代码运行效果如下图：

二、二个简单的示例

第二个例子用到了layui的一些元素layui下载地址
引入layui.all.js和layui.css即可

scanQR.jsp如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
 <title>test1</title>
 <%--注意引用和地址--%>
 <script src="js/qrcode.min.js"></script>
 <script src="js/jquery-1.11.0.js"></script>
 <script type="text/javascript" src="js/layui/layui.all.js"></script>
 <link type="text/css" rel="styleSheet" href="js/layui/css/layui.css" rel="external nofollow" />
</head>
<body>

<div align="center">
 <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="skipHandle()">预览</button>
</div>

<div id="code" style="display: none;">
 <div id="qrcode" style="margin-left: 75px;margin-top: 20px"></div>
</div>

<script>

 layui.use(['layer'], function () {
  var layer = layui.layer
 });

 // 设置要生成二维码的链接
 new QRCode(document.getElementById("qrcode"), {
  text: 'https://blog.csdn.net/bug_producter/',//注意地址的修改
  width: 250,
  height: 250
 });

 //预览等弹出框
 function skipHandle() {
  layer.open({
   type: 1,
   title: "bug_producter的博客",//标题
   area: ['400px', '400px'],
   content: $('#code').html(),
  });
 }

</script>
</body>
</html>

运行效果如下：

这是博主刚刚生成的一个二维码，扫描后会跳转到博主的主页，用手机浏览器，或者微信QQ…等等都可以扫描扫描，关键代码就这一句 text: ‘https://blog.csdn.net/bug_producter/'

有兴趣的小伙伴可以转到，

手机访问本地Tomcat服务器

在这篇文章的最后重点哪儿，也有关于二维码的内容，会追加一个例子的文件

到此这篇关于js生成二维码的示例代码的文章就介绍到这了,更多相关js生成二维码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS调用安卓手机摄像头扫描二维码

项目要求: 使用H5模仿微信扫一扫付款功能经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片,经过QrCode直接再本地识别. 优点: 兼容大多数浏览器本地识别不占用服务端资源代码比较简单只有一个页面 <html lang="ZH-CN"> <head> <meta charset="utf-8"> <title>Web QrCode Test</t
Angular JS 生成动态二维码的方法

一.场景二维码的场景,很多.这里是二维码一种小场景,比如分享一个链接,商品链接,项目链接,优惠券链接- 技术实现,如果用后端实现,需要构造输出一个图片流.或者后端生产二维码图片,给图片地址就好了.弊端,这个二维码就是一个链接,后端的文件 IO 操作,还得考虑存储.太费力. 如果前端实现,这样就很轻松了.这只是个分享二维码,分享出去给人家扫一扫.利用前端的 canvas,这里坐下调研. jq 封装的 qrcode.js ,文章网上一大堆. angular js :https://github.c
nodejs获取微信小程序带参数二维码实现代码

nodejs获取微信小程序带参数二维码实现代码由于项目需求,需要获取小程序页面的带有参数的二维码.好,那就看文档搞吧. 之前都是写前端,没有写过后台的东西,这次难得有机会组长让我试一试试用node来写,那就写吧. 1.首页获取token,发送request请求,用get的方式,在url后面加上小程序的grant_type,appid,secret,就顺利拿到token了,注意,这个token是有有效时间的,小程序的是7200秒,也就是2个小时,每天获取的次数有限,需要有个中控服务器定时获取to
nodejs实现超简单生成二维码的方法

本文实例讲述了nodejs实现超简单生成二维码的方法.分享给大家供大家参考,具体如下: 一开始使用node-qrcode(https://github.com/soldair/node-qrcode),结果安装的时候需要安装python,且不支持python3.0以上,安装python2.0的时候又需要安装其他的环境,所以放弃了. 最后选择了一个小众的插件qr-image(https://github.com/alexeyten/qr-image) 前台页面如下 views/index.ejs
JS实现将链接生成二维码并转为图片的方法

本文实例讲述了JS实现将链接生成二维码并转为图片的方法.分享给大家供大家参考,具体如下: <div id="code"></div> <img id="img"/> <script type="text/javascript"> var qrcode=$("#code").qrcode({ render:'canvas||table', width: 200, //宽度 heig
js canvas实现二维码和图片合成的海报

本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成一张图片,画到大的画布上.把名字画到画布上.把整张画布转为图片. 一.定义画布和合成海报的img <style type="text/css"> #canbox { width: 100%
JS实现扫码枪扫描二维码功能

扫码枪扫描二维码,具体内容如下所示: 业务需求要将数据生成二维码,并用扫码枪扫出数据上传到服务端. 先上代码吧,之后再完善注意点 this.start = new Date().getTime() let code = '' let lastTime, nextTime let lastCode, nextCode let that = this window.document.onkeypress = function (e) { if (window.event) { // IE nextC
js生成二维码的示例代码

前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件. 插件链接: qrcode.js下载地址,点击即可下载一.一个简单的示例如下:(仅供参考) <%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 搬运请备注 To change this template use File | Settings | File
java使用jar包生成二维码的示例代码

使用java进行二维码的生成与读取使用到了谷歌的zxing.jar 第一步导入,maven依赖或者下载指定jar包  <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version
PHP实现生成二维码的示例代码

目录前言 1.目前有2种类型的二维码 2.用户扫描带场景值二维码时,可能推送以下两种事件 3.创建二维码ticket 4.临时二维码请求说明 5.永久二维码请求说明 6.临时二维码和永久二维码生成实现的代码前言为了满足用户渠道推广分析和用户账号绑定等场景的需要,公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送. 1.目前有2种类型的二维码临时二维码,是有过期时间的,最长可以设置为在二维码生成后的30天(即2592000
Java生成中间logo的二维码的示例代码

最近有负责微信开发,对于微信开发的项目,肯定少不了二维码啦,正好有个这样的需求,这对不同的商品生成一个二维码,扫码即刻下单.博主就弄了一个二维码生成的工具类. 弄出来之后,产品经理又说了,中间放上公司的logo是不是好一点?加上吧, 加上公司logo之后,产品经理想了想,每个商品都有个二维码,销售人员有很多个商品二维码,群发给用户,在qq群上,微信群上,怎么知道哪个二维码对应哪个商品的呢?于是决定要加上商品名称.最后商品二维码就成了下面这个模样了(当然啦,这里面的logo并不是博主现职公司的).
three.js 制作动态二维码的示例代码

今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas.getContext('2d');//获取画布的上下文 canvas.width = 310;//设置尺寸 canvas.height = 310; img = new Image();//创建一张图片 img.src
js基于qrcode.js生成二维码的方法【附demo插件源码下载】

本文实例讲述了js基于qrcode.js生成二维码的方法.分享给大家供大家参考,具体如下: 调用qrcode.js文件代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="js/qrcode.js"></script> <style> #qr
微信小程序动态生成二维码的实现代码

效果图如下: 实现 wxml  <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view>  <view class=&qu
Android ZxingPlus精简的二维码框架示例代码

这个二维码框架不仅使用的代码少,而且可以生成带图片的二维码,而且二维码扫描界面也是先做好的,也比较好看.我们所需要做的就是在扫描二维码后得到的数据对其进行操作. 使用方法添加依赖 compile 'com.singleshu:ZxingPlus:1.1.4' 代码 public class MainActivity extends AppCompatActivity { TextView test; ImageView imageView; @Override protected void o
C# 根据字符串生成二维码的实例代码

1.先下载NuGet包(ZXing.Net) 2.新建控制器及编写后台代码 using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Linq; using System.Web; using System.Web.Mvc; using ZXing; using ZXing.QrCode; nam
C#/VB.NET 在Word中添加条码、二维码的示例代码

本文介绍如何通过C# 和VB.NET代码实现在Word文档中添加条码和二维码.代码中将分为在Word正文段落中.页眉页脚中等情况来添加. 使用工具: Free Spire.Office for .NET (免费版) 工具简介: 这是Spire所有.NET平台下免费产品的集合包,包含Spire.Barcode.dll.Spire.DataExport.dll.Spire.Pdf.dll.Spire.Doc.dll.Spire.DocViewer.Forms.dll .Spire.PdfViewer

js生成二维码的示例代码

一、一个简单的示例

二、二个简单的示例

相关推荐

随机推荐