插件描述：ArtQRCode 是基于 qrcode.js 的封装，支持以图片元素为基本单元的二维码绘制。
注：此插件需要在服务端运行查看效果，本地运行不能正常演示
ArtQRCode
ArtQRCode 是基于 qrcode.js 的封装，支持以图片元素为基本单元的二维码绘制插件。
使用方法
在HTML文件中引入。
<script type="text/javascript" src="path/to/artqrcode.js"></script>
HTML结构
在页面上添加一个<div>容器。
<div id="qrcode"></div>
初始化插件
let qrcode = new QRCode(document.getElementById("qrcode"), {
text: "https://jq22.com/",
width: 500,
height: 500,
materials: {
border: "./materials/border.png",
eye: "./materials/eye.png",
row4: "./materials/row4.png",
col4: "./materials/col3.png",
row2col3: "./materials/row2col3.png",
row3col2: "./materials/row3col2.png",
col3: ["./materials/col3.png", "./materials/col3_2.png"],
row2col2: "./materials/row2col2.png",
corner: "./materials/corner.png",
row2: ["./materials/row2.png", "./materials/row2_2.png"],
col2: "./materials/col2.png",
single: ["./materials/single.png", "./materials/single_2.png"],
}
});
PREVIOUS:
NEXT:
相关插件-独立的部件,图像
讨论这个项目（10）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
＆午夜狂刀 0
2019/12/13 13:51:33
-
能不能做个表单提交，可以在前端自己更换网址，皮肤的功能~有了这个就完美了！
areyouOk0
2019/12/13 16:49:10
-
你要的这些功能实现都很简单，直接表单改插件的参数就行了。
冥想舒畅 0
2019/10/13 9:44:34
-
另外，能否使用三个不同的图片替换3个码眼？
好名字都被砖家起了0
2019/10/13 10:48:18
可以替换
if (materials.eye && (row == 0 && col == 0 || row + 7 == nCount && col == 0 || row == 0 && col + 7 == nCount)) {
_oContext.drawImage(_getRealMaterial(materials.eye), nLeft, nTop, nWidth * 7, nHeight * 7);
_updateDrawModules(row, col, 7, 7);
}在这里修改图片。这里会循环输出3次，每次修改materials.eye值就行了。
冥想舒畅0
2019/10/13 13:23:27
-
在同一组图片里面，要让生成的二维码每次都有变化怎么处理呢？
目前的情况是无论页面怎么刷新，二维码的都是一模一样的。
西瓜0
2019/10/13 21:21:34
二维码是根据url生成的，url不变,生成的二维码当然不会变，如果你想二维码变化，在url中加一个随机参数就行了。
冥想舒畅0
2019/10/13 22:01:17
-
好期待后续版本的更新呀，比如加入斜角线、S型特殊图片的支持等等，感觉艺术码是大势所趋啊！
冥想舒畅 0
2019/10/13 0:45:30
-
这个是神级的作品啊，超赞！
顺便想请教一下，有没有本地识别二维码的插件呢？
好多都不能识别支付宝或微信收款码，也有拍出来的图片里面的二维码不能识别的。 回复
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
