easy.qrcode实现多彩多样式二维码效果代码
代码语言：html
所属分类：其他
代码描述：easy.qrcode实现多彩多样式二维码效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/easy.qrcode.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#header{
text-align: left;
margin: 0;
line-height: 80px;
background-color: #007bff;
color: #fff;
padding-left: 20px;
font-size: 36px;
}
#header a{color: #FFFF00;}
#header a:hover{color: #FF9933;}
#container {
width: 1030px;
margin: 10px auto;
}
.imgblock {
margin: 10px 0;
text-align: center;
float: left;
min-height: 420px;
border-bottom: 1px solid #B4B7B4;
}
.qr table {
margin: 0 auto;
}
.title {
font-size: 15px;
font-weight: bold;
color: #fff;
text-align: center;
width: 330px;
margin: 10px 5px;
height: 60px;
background-color: #0084C6;
line-height: 60px;
}
#footer {
margin-top: 20px;
border-top: 1px solid gainsboro;
line-height: 40px;
clear: both;
text-align: center;
}
#footer a {
color: #0084C6;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/template" id="qrcodeTpl">
<div class="imgblock">
<div class="title">{title}</div>
<div class="qr" id="qrcode_{i}"></div>
</div>
</script>
<script type="text/javascript">
var demoParams = [
{
title: "Normal",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
quietZone: 0,
colorDark: "#000000",
colorLight: "#ffffff",
//PI: '#f55066',
correctLevel: QRCode.CorrectLevel.H // L, M, Q, H
}
},
{
title: "Color",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
colorDark: "#473C8B",
colorLight: "#FFFACD",
//PI: '#f55066',
correctLevel: QRCode.CorrectLevel.H // L, M, Q, H
}
},
{
title: "DotScale",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
dotScale: 0.4
}
},
{
title: "Position Color + Alignment Color",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
colorDark: "#000000",
colorLight: "#ffffff",
PI: '#BF3030',
PO: '#269926',
AI: '#009ACD',
AO: '#B03060',
correctLevel: QRCode.CorrectLevel.H // L, M, Q, H
}
},
{
title: "Position Color + DotScale",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
colorDark: "#000000",
colorLight: "#ffffff",
PI: '#f55066',
PI_TL: '#b7d28d', // Position Inner - Top Left
PO_TL: '#aa5b71', // Position Outer - Top Right
PO_BR: '#336699', // Position Outer - Bottom Right
//PI_BR: '#336699', // Position Outer - Bottom Right
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
dotScale: 0.5
}
},
{
title: "Timing + DotScale",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
colorDark: "#000000",
colorLight: "#ffffff",
PO_BR: '#A67C00', // Position Outer - Top Right
PI_BR: '#A67C00', // Position Outer - Bottom Right
// === Timing Pattern Color
timing: '#e1622f',
timing_V: '#00C12B',
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
dotScale: 0.4
}
},
{
title: "BackgroundImage",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
colorDark: "#000000",
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
backgroundImage: '//repo.bfw.wiki/bfwrepo/image/5e53164d08ab2.png',
backgroundImageAlpha: 1,
autoColor: false,
dotScale: 1
}
},
{
title: "Auto Color + BackgroundImage + DotScale",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
colorDark: "#000000",
PI: '#f55066',
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
backgroundImage: '//repo.bfw.wiki/bfwrepo/image/5e53164d08ab2.png',
autoColor: true,
dotScale: 0.5
}
},
{
title: "AutoColor + backgroundImageAlpha",
config: {
text: "http://code.bfw.wiki/",
width: 240,
height: 240,
colorDark: "#000000",
PI: '#f55066',
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
backgroundImage: '//repo.bfw.wiki/bfwrepo/image/5e53164d08ab2.png',
backgroundImageAlpha: 0.3,
autoColor: true,
dotScale: 0.5,
binarize: true
}
},
{
title: "Logo",
config: {
text: "http://code.bfw.wiki/", // Content
width: 240, // Widht
height: 240, // Height
colorDark: "#000000", // Dark color
colorLight: "#ffffff", // Light color
// === Logo
logo: "//repo.bfw.wiki/bfwrepo/image/5e53164d08ab2.png", // LOGO
// logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png",
// logoWidth:80,
// logoHeight:80,
logoBackgroundColor: '#ffffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
logoBackgroundTransparent: false, // Whether use transparent image, default is false
correctLevel: QRCode.CorrectLevel.H // L, M, Q, H
}
},
{
title: "Logo + DotScale",
config: {
text: "http://code.bfw.wiki/", // Content
width: 240, // Widht
height: 240, // Height
colorDark: "#000000", // Dark color
colorLight: "#ffffff", // Light color
// === Logo
logo: "//repo.bfw.wiki/bfwrepo/image/5e53164d08ab2.png", // LOGO
// logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png",
// logoWidth:80,
// logoHeight:80,
logoBackgroundColor: '#ffffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
logoBackgroundTransparent: false, // Whether use transparent image, default is false
timing_V: '#00B2EE',
correctLevel: QRCode.CorrectLevel.H,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0