版权声明:本文供经验交流,欢迎转载 https://blog.csdn.net/qq_31708763/article/details/85054158
QRCode.js是一个二维码生成javascript库;支持跨浏览器的HTML5 Canvas和表格标签的DOM操作;并且不依赖其它的库或拓展。
网站截图:
JS网盘下载地址:https://pan.baidu.com/s/1RiDK5uajhsB2N7j3rTjPLA
使用示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>COPY TEST</title>
<meta name="viewport"
content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
该页面测试,H5点击复制
<br>
<button id="copy" data-clipboard-action="copy">点击复制</button>
<br>
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
</body>
<script src="asset/self/js/jquery-1.11.0.js"></script>
<script src="asset/self/js/clipboard.min.js"></script>
<script src="asset/self/js/qrcode.js"></script>
<script>
var clipboard = new ClipboardJS('#copy', {
// 点击copy按钮,直接通过text直接返回复印的内容
text : function() {
return '复制内容to be or not to be';
}
});
clipboard.on('success', function(e) {
alert(JSON.stringify(e));
console.log(e);
});
clipboard.on('error', function(e) {
alert(JSON.stringify(e));
});
</script>
<script type="text/javascript">
// qrcode:1.简单方式
new QRCode(document.getElementById('qrcode'), 'your content');
// qrcode:2.设置参数方式,最后一个参数是精确度,H为高
var qrcode = new QRCode("test", {
text: "http://jindo.dev.naver.com/collie",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
//and you can use some methods
//qrcode.clear(); // clear the code.
//qrcode.makeCode("http://naver.com"); // make another code.
</script>
</html>
运行效果截图: