jq如何生成二维码

  代码如下:

1.jquery.qrcode生成二维码代码

<!DOCTYPE html>
<html>
<head>
  <script charset='utf-8' type='text/javascript' src='js/jquery-1.11.0.js'></script>
  <script src="js/jquery.qrcode.min.js" type="text/javascript"></script>
  <script type="text/javascript">
$(function(){
  $('#qr_container').qrcode({
    render: "canvas",
    height: 120,
    width: 120,
    correctLevel: 0,
    text: "https://www.cnblogs.com/dreambin/"
  });
});
/*注释
render: 二维码图片的生成方式。支持table和canvas来渲染。
height: 二维码高度。 width: 二维码宽度。 correctlevel: 二维码容错级别。 text: 二维码内容。*/
  </script>
</head>
<body>
  <div id="qr_container" style="margin:auto; position:relative;"></div>
</body>
</html>

效果如下:

2.jquery-qrcode生成带logo二维码代码

<div id="container"></div>
<img id="qr-img" src="img/icon.png" hidden >
<script src="js/jquery-1.11.0.js"></script>
<script src="js/jquery-qrcode.js"></script>
<script type="text/javascript">
	var $option = {
render: 'canvas', // render method: 'canvas', 'image' or 'div' 渲染模式 三种,因为我需要生成图片,以便用户下载,选的'image'
minVersion: 1, // version range somewhere in 1 .. 40
maxVersion: 40,
ecLevel: 'L', // error correction level: 'L', 'M', 'Q' or 'H' 识别度 H最高
size: 200, // size in pixel 画布大小
left: 0, // offset in pixel if drawn onto existing canvas
top: 0,
fill: '#000', // code color or image element
background: '#fff', // background color or image element, null for transparent background
text: 'https://www.cnblogs.com/dreambin/', // content
radius: 0, // corner radius relative to module width: 0.0 .. 0.5
quiet: 2, // quiet zone in modules 白边的块数
mode: 4, // modes / 0: normal / 1: label strip / 2: label box / 3: image strip / 4: image box
// 5种模式: 0是普通 / 1是标语占中间一行 / 2标语占中间一块 / 3图片站中间一行 / 4图片占中间一块 较常用的是4
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'https://www.cnblogs.com/dreambin/',
fontname: 'sans',
fontcolor: '#000',
image: $("#qr-img")[0] //选择放在中间的图片,原先我写的路径 无效,后来用这种方法可以拿到
}
$('#container').qrcode($option);
</script>

效果如下:

注,具体图片大小样式可以进行调参数值改变,避免二维码不能扫描,建议图片不要超过二维码三分之一

react框架又是如何生成二维码?代码如下:

1.qrcode.react生成二维码步骤

  先安装qrcode.react组件

    npm install qrcode.react

  用法:

import React from 'react';
import QRCode from 'qrcode-react'; React.render(
<QRCode value="https://www.cnblogs.com/dreambin/" />,
);

  参数:

prop type default value
value string  
renderAs string ('canvas' 'svg') 'canvas'
size number 128
bgColor string(CSS color) "#FFFFFF"
fgColor string(CSS color) "#000000"
level string ('L' 'M' 'Q' 'H') 'L'
 

  效果如下:

2.qrcode-react生成带logo二维码步骤

  先安装qrcode.react组件

    npm install qrcode-react

  用法:

import React from 'react';
import QRCode from 'qrcode-react'; React.render(
<QRCode
value="https://www.cnblogs.com/dreambin/"
logo="logo.png"
/>,
);

  参数:

prop type default value
value string  
size number 128
bgColor string(CSS color) "#FFFFFF"
fgColor string(CSS color) "#000000"
logo string (URL / PATH)  
logoWidth number size * 0.2
logoHeight number  
 
 

  效果如下:

  释:上图为调整了尺寸是放大版二维码

注:图片与二维码放太大容易失真,避免二维码无法扫描,不要将二维放大,同理,logo一样不可以方太大。

jQuery和react实现二维码的更多相关文章

  1. 基于jquery类库的绘制二维码的插件jquery.qrcode.js

     jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...

  2. jquery.qrcode.js生成二维码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 为jquery qrcode生成的二维码嵌入图片

    在一次微信项目中,需要实现通过扫描二维码来进行会议签到,二维码的生成选择了qrcode.js的版本,然后使用jquery.qrcode.js插件来绘制二维码. <script type=&quo ...

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

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

  5. jquery.qrcode.js 生成二维码并支持中文的方法

    GitHub地址: https://github.com/jeromeetienne/jquery-qrcode <div class="QR"></div> ...

  6. 转: jquery.qrcode.js生成二维码插件&转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

  7. React Native 二维码扫描组件

    学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现po ...

  8. jquery插件生成简单二维码

    除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...

  9. react生成二维码

    图片实例: 简介: QRCode.js 是一个生成二维码的JS库.主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 用法: 1. 在项目中引入qrcode.m ...

随机推荐

  1. 解决国内NPM安装依赖速度慢问题

      版权声明:本文为博主原创文章,转载请注明原文地址. http://blog.csdn.net/rongbo_j/article/details/52106580 不知道各位是否遇到这种情况,使用N ...

  2. 课堂笔记及知识点----树(2018/10/24(pm))

    树 概念:由一个或多个(n≥0)结点组成的有限集合 T, 有且仅有一个结点称为根( root), 当 n>1时,其余的结点分为 m(m≥0)个互不相交的有限集合 T1,T2, …, Tm.每个集 ...

  3. NetBeans GUI tests on Jenkins + Windows (转)

    from http://forgetfulprogrammer.wordpress.com/tag/interact-with-desktop/ Running NetBeans applicatio ...

  4. bug和注意事项

    bug: 1.新增角色,在选择权限树的时候,如果不选择根目录下的第一个节点,保存后,权限树会打不开. 2.文档页面有两个大字段,即ueditor编辑器的时候,保存后回显会有问题 不过一个页面有两个大文 ...

  5. python 数据分析算法(决策树)

    决策树基于时间的各个判断条件,由各个节点组成,类似一颗树从树的顶端,然后分支,再分支,每个节点由响的因素组成 决策树有两个阶段,构造和剪枝 构造: 构造的过程就是选择什么属性作为节点构造,通常有三种节 ...

  6. match 和 lastIndex 字符串检测差异

    match .replace .search 这写不能识别特殊字符 indexOf .indexof 能识别特殊字符 str.lastIndexOf('a') > -1 // 通过lastInd ...

  7. web中spring框架启动流程第一发

    web.xml中springmvc相关配置如下:<servlet> <servlet-name>springmvc</servlet-name> <servl ...

  8. 《图解HTTP》读书笔记(一:网络基础TCP/IP)

    好书什么时候开始读都不晚.作为一个测试人员,是一定要掌握一些网络的基础知识的.希望能够边读书边在这里记录笔记,便于加深理解以及日后查阅. 一.TCP/IP协议族 计算机与网络设备要互相通信,双方必须基 ...

  9. Servlet学习1

    1.首先在Tomcat的webapp目录下新建文件夹myWebapp,作为自己的web应用. 2.myWebapp下新建WEB-INF(必须这个名)目录,WEB-INF下新建classes目录放置se ...

  10. MFC Dialog使用

    1. OnInitDialog 对话框初始化函数 在MFC主对话框OnInitDialog()中弹出对话框 BOOL CXXXDlg::OnInitDialog() { CDialogEx::OnIn ...