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. Thymeleaf常用th标签

    https://www.jianshu.com/p/f9ebd23e8da4 关键字 功能介绍 案例 th:id 替换id <input th:id="'xxx' + ${collec ...

  2. [ipsec][crypto] IKEv2的协商交互分析

    一: 无论协商了什么样的加密算法.DH都交换一块长度为32byte的内存,作为key. IKE和esp的key,分别基于这块内存生成. 二: 当esp的算法协商没有指定dh group时,rekey将 ...

  3. 《PHP内核剖析 - FPM》

    一:概述 - FPM 定义 -  FPM(FastCGI Process Manager)是PHP FastCGI运行模式的一个进程管理器. -  FastCGI -  Web服务器(如:Nginx. ...

  4. WebSocket（一）-RFC6455

    1.官方在线 本地下载 参考翻译:gitbook

  5. mysql--表数据操作

    查询: 简单查询 ####查询的字段必须在表中存在 #### 对查询出来的数据进行修改时,不会修改原来的数据,只是修改了可视化的,我们看到的数据. # 查一个数据 select 字段名 from 表名 ...

  6. [开发笔记]--把input框设置成font-size:0埋下的坑。

    vue项目上开发了一个输入pin码的组件.在某些安卓机器上.用户点击键盘后会自动失去焦点自动收起键盘.经过排查,发现是css属性font-size设置成0导致的.

  7. Mysql笔试题

    1.查询Student表中的所有记录的Sname.Ssex和Class列. SELECT Sname,Ssex,Class FROM Students; 2.查询教师所有的单位即不重复的Depart列 ...

  8. （转）Centos下，Docker部署Yapi接口管理平台

    接口测试的工具很多,公司引进了接口管理平台Yapi,自己尝试直接搭建,从安装Nodejs到配置MongoDB数据库,再到安装yapi的时候,遇到浏览器打开本地服务器Ip地址后,没有显示部署内容...没 ...

  9. 3.2.1 SpringMVC入门

    一. SpringMVC入门 1. MVC介绍 MVC全名 是Model View Controller, 是模型(model) - 视图(view) - 控制器(controller) 的缩写, 它 ...

  10. 5分钟安装 关于win10安装composer PHP 用来管理依赖（dependency）关系的工具

    1.在你的phpstudy或者wamp中开启extension=php_openssl.dll扩展 (php配置文件)并配置好php的环境变量 2.在与你安装phpstudy和wamp不一样的盘中创建 ...