Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Append icon only to qrcode's canvas mode #181

Open
wants to merge 32 commits into
base: master
Choose a base branch
from
Open

Append icon only to qrcode's canvas mode #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
b1f12d7
Append icon only to qrcode's canvas mode
555chy Jan 4, 2019
9f25e2d
Create demo.html
555chy Apr 2, 2019
5f52fab
Update qrcode.js
555chy Apr 2, 2019
d77c292
Add files via upload
555chy Apr 2, 2019
2a33e89
Update demo.html
555chy Apr 2, 2019
66429f8
Update qrcode.js
555chy Apr 2, 2019
dc86b9e
Delete qrcode_border.jpg
555chy Apr 2, 2019
ab7e6ba
Add files via upload
555chy Apr 2, 2019
397a9c2
Update demo.html
555chy Apr 2, 2019
e272f6f
Delete qrcode_border.jpg
555chy Apr 2, 2019
4342ba6
Add files via upload
555chy Apr 2, 2019
79f493c
Update demo.html
555chy Apr 2, 2019
4f438d2
Update qrcode.js
555chy Apr 2, 2019
49daadd
Update README.md
555chy Apr 2, 2019
3082c25
Update README.md
555chy Apr 9, 2019
8040f33
Update qrcode.js
555chy Apr 9, 2019
85334c6
Update demo.html
555chy Apr 10, 2019
97c7744
Delete qrcode_border.jpg
555chy Apr 10, 2019
b6c29a2
Delete index.svg
555chy Apr 10, 2019
cc5ee9f
Delete qrcode.min.js
555chy Apr 10, 2019
45890ed
Delete jquery.min.js
555chy Apr 10, 2019
62ce551
Delete index-svg.html
555chy Apr 10, 2019
dd4448a
Delete index.html
555chy Apr 10, 2019
a26d9ee
Update demo.html
555chy Apr 10, 2019
0c88e35
Update qrcode.js
555chy Apr 10, 2019
037da5c
Update README.md
555chy Apr 10, 2019
7ad61d9
Update README.md
555chy Apr 10, 2019
d8984dc
Update demo.html
555chy Apr 10, 2019
e1d3ed9
Update qrcode.js
555chy Apr 10, 2019
138a38c
Add files via upload
555chy Apr 10, 2019
6a08a71
Add opaque curtain support
555chy May 20, 2019
892a8ae
Update demo.html
555chy May 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,66 @@ or with some options
<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
//二维码内容
text: "http://jindo.dev.naver.com/collie",
//二维码宽度
width: 128,
//二维码高度
height: 128,
//二维码前景色
colorDark : "#000000",
//二维码背景色
colorLight : "#ffffff",
//容错级别
correctLevel : QRCode.CorrectLevel.H
});
</script>
```

新增选项
```
var qrcode = new QRCode('qrcode', {
//二维码内容
text: 'your content',
//二维码宽度
width: 125,
//二维码高度
height: 125,
//二维码前景色
colorDark : '#000000',
//二维码背景色
colorLight : "#fff",
/*!
容错级别，可设置为：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
*/
correctLevel : QRCode.CorrectLevel.L,
//二维码中心图片
iconSrc: "http://www.365mini.com/static/image/cry.gif",
//二维码中心图片边框弧度
iconRadius: 10,
//二维码中心图片边框宽度
iconBorderWidth: 3,
//二维码中心图片边框颜色
iconBorderColor: "red",
//外围幕布（或画布）的宽度
curtainWidth: 300,
//外围幕布（或画布）的高度
curtainHeight: 300,
//外围幕布（或画布）图片
curtainImg: "qrcode_border.png",
//外围幕布（或画布）底色
curtainBgColor: "Wheat",
//二维码相对外围幕布（或画布）的X偏移
qrcodeOffsetX: 88,
//二维码相对外围幕布（或画布）的Y偏移
qrcodeOffsetY: 108,
});
```

and you can use some methods

```
Expand All @@ -44,3 +94,5 @@ twitter @davidshimjs

[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/davidshimjs/qrcodejs/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

## Online Demo
[Online Demo](https://555chy.github.io/qrcodejs/demo.html)
69 changes: 69 additions & 0 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<script src="qrcode.js"></script>
<style>
/*! 外边框通过CSS设置样式 */
#qrcode {
border: 10px dashed red;
border-radius: 10px;
width: 300px;
height: 300px;
}
</style>
<script>
window.onload=()=>{
// 简单方式
//var q1 = new QRCode(document.getElementById('qrcode'), 'your content');
// 设置参数方式
var qrcode = new QRCode('qrcode', {
//二维码内容
text: 'your content',
//二维码宽度
width: 125,
//二维码高度
height: 125,
//二维码前景色
colorDark : '#000000',
//二维码背景色
colorLight : "#fff",
/*!
容错级别，可设置为：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
*/
correctLevel : QRCode.CorrectLevel.L,
//二维码中心图片
iconSrc: "http://www.365mini.com/static/image/cry.gif",
//二维码中心图片边框弧度
iconRadius: 10,
//二维码中心图片边框宽度
iconBorderWidth: 5,
//二维码中心图片边框颜色
iconBorderColor: "red",
//外围幕布（或画布）的宽度
curtainWidth: 300,
//外围幕布（或画布）的高度
curtainHeight: 300,
//外围幕布（或画布）图片(图片可以使用透明或不透明的)
curtainImg: "qrcode_border.png",
//外围幕布（或画布）底色(底色和图片同时设置时，显示底色)
//curtainBgColor: "Wheat",
//二维码相对外围幕布（或画布）的X偏移
qrcodeOffsetX: 88,
//二维码相对外围幕布（或画布）的Y偏移
qrcodeOffsetY: 108,
});
//清空原先的图像，重新做一张
//qrcode.clear();
//qrcode.makeCode('new content');
}
</script>
</head>
<body>
<div id="qrcode"></div>
</body>
</html>
47 changes: 0 additions & 47 deletions index-svg.html
View file
Open in desktop

This file was deleted.

44 changes: 0 additions & 44 deletions index.html
View file
Open in desktop

This file was deleted.

37 changes: 0 additions & 37 deletions index.svg
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions jquery.min.js
View file
Open in desktop

This file was deleted.

Loading