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. 黑盒测试实践——day05

    一.任务进展情况 今天主要对web系统的“员工管理模块”和“招聘管理模块”进行测试.测试用例选取之前已经做好的excel文件.       二.存在的问题

  2. <c:forEach var="role" items="[entity.Role@d54d4d, entity.Role@1c61868, entity.Role@6c58db, entity.Role@13da8a5]"> list 集合数据转换异常

    <c:forEach var="role" items="[entity.Role@d54d4d, entity.Role@1c61868, entity.Role ...

  3. px,em,rem的区别与用法

    别人总结的.个人觉得特别的好: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html

  4. IntelliJ IDEA 2017.2.6 x64 配置 tomcat 启动 maven 项目

    IntelliJ IDEA 2017.2.6 x64 配置 tomcat 启动 maven 项目 1.确认 IDEA 是否启用了 tomcat 插件 2.添加 tomcat 选择 tomcat 存放路 ...

  5. 手写AVL 树（下）

    上一篇 手写AVL树上实现了AVL树的插入和查询 上代码: 头文件:AVL.h #include <iostream> template<typename T1,typename T ...

  6. PAT甲级1078 Hashing【hash】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805389634158592 题意: 给定哈希表的大小和n个数,使用 ...

  7. 微信小程序调用高德地图

    index.wxml: longitude:经度 latitude:维度 地图所定位的区域 index.js 地图所定位的点

  8. python常用模块——collections

    好久没学习了,简单了解下 Ⅰ.namedtuple 1.1 简单回顾一下tuple tuple是一个不可变的可迭代对象 ①可迭代 In [1]: test_tuple = (1,2,3,4,5) In ...

  9. Source Insight相关设置

    #Source Insight中按快捷键在其他编辑器中打开当前文件 "D:\Program Files\Zend\ZendStudio-5.5.0\bin\ZDE.exe"  %f ...

  10. Tkinter 项目-屏保

    参考教程,以及网上资料,针对小白更好理解 关于tkinter的屏保涉及的知识点和思想 项目分析: 屏保启动方式:手动,自动 敲击键盘或者移动鼠标后,或者其他引发事件,则停止 如果屏保是一幅画的话,则没 ...