jQuery和react实现二维码
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实现二维码的更多相关文章
- 基于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 ...
- jquery.qrcode.js生成二维码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 为jquery qrcode生成的二维码嵌入图片
在一次微信项目中,需要实现通过扫描二维码来进行会议签到,二维码的生成选择了qrcode.js的版本,然后使用jquery.qrcode.js插件来绘制二维码. <script type=&quo ...
- 使用jquery.qrcode.js生成二维码
通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...
- jquery.qrcode.js 生成二维码并支持中文的方法
GitHub地址: https://github.com/jeromeetienne/jquery-qrcode <div class="QR"></div> ...
- 转: jquery.qrcode.js生成二维码插件&转成图片格式
原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...
- React Native 二维码扫描组件
学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现po ...
- jquery插件生成简单二维码
除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...
- react生成二维码
图片实例: 简介: QRCode.js 是一个生成二维码的JS库.主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 用法: 1. 在项目中引入qrcode.m ...
随机推荐
- IDEA环境下SSM整合------环境配置
声明:本文纯为个人笔记整理,如有不妥之处还望及时指出,欢迎转载! 只为解决操作问题,可以从第二幅图往后看! 一.做不出详细的概念叙述和文本设计,本文主要以实战步骤为主,少量解释为辅助,下面请大家牢记两 ...
- tomcat多实例
//结合博主之前的安装tomcat的博文一起看,tomcat多实例就是在不同路径启动多个tomcat,然后在本机不同端口启动 [root@ycj ~]# cd /usr/local/src/ [roo ...
- 【TensorFlow使用教程】1 环境搭建
一.TensorFlow主要依赖包——Protocol Buffer & Bazel 1. Protocol Buffer 首先要弄清三个概念: 结构化数据:指拥有多种属性的数据,例如用户信息 ...
- react将字符串转义成html语句
在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,然而直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式 ...
- centos 7安装mysql 执行./scripts/mysql_install_db --user=mysql 报错 FATAL ERROR: please install the following Perl modules before executing ./scripts/mysql_install_db: Data::Dumper
[root@localhost mysql]# ./scripts/mysql_install_db --user=mysql FATAL ERROR: please install the fol ...
- Java安装及基础01
Java特性: (1)java语言是面向对象的语言 (2)编译一次,到处运行(跨平台) (3)高性能 配置环境变量: JAVA命名规则: (1)常量命名规则:每个字母都大写(POEPLE_PRE_NO ...
- Redis的数据结构之Set
存储Set 和List类型不同的是,Set集合中不允许出现重复的元素 Set可包含的最大元素数量是4294967295 存储set常用命令: 添加/删除元素 获取集合中的元素 集合中的差集运算 集合中 ...
- java实现每个单词首字母大写
/** * 每个单词第一个字母大写 * @param str * @return */ public static String toUpperFirstCode(String str) { Stri ...
- 学号 20175201张驰 《Java程序设计》第6周学习总结
学号 20175201张驰 <Java程序设计>第6周学习总结 教材学习内容总结 第7章 ·1.Java支持在一个类中声明另一个类,这样的类称作内部类,而包含内部类的类称为内部类的外嵌类 ...
- python条件表达式:多项分支,双向分支
# ### 多项分支 ''' if 条件表达式1: code1 code2 elif 条件表达式2: code3 code4 elif 条件表达式3: code5 code6 else: code7 ...