利用canvas生成二维码

最新推荐文章于 2024-06-28 17:37:52 发布

weixin_30468137

最新推荐文章于 2024-06-28 17:37:52 发布

阅读量378

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wyliunan/p/8145783.html

版权

实现原理是通过canvas利用input的value值在div内生成canvas绘制的二维码，然后toDataURL方法为img赋值最终实现二维码的生成和下载
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>收款二维码</title>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div style="text-align: center;display: none" id="qrPic"></div>
<input type="hidden" id="codeUrl" name="codeUrl" value="jebchjebch" />
<img src="" id="myImg"/>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script src="jquery.qCode.min.js"></script>
<script type="text/javascript">
$(function() {
qr();
});

//生成二维码代码
function qr() {
$("#qrPic").empty();
var str = toUtf8($("#codeUrl").val());
$("#qrPic").qrcode({
render: "canvas",
width: 270,
height: 270,
text: str
});

$("canvas").attr("id", "erw");
var canvas = document.getElementById('erw');
var context = canvas.getContext('2d');
var strDataURI = canvas.toDataURL();
document.getElementById('myImg').src = strDataURI;
console.log(strDataURI)//可以得到url
}
</script>
</body>

</html>

转载于:https://www.cnblogs.com/wyliunan/p/8145783.html