编程
url地址生成二维码及转换成图片
写出来的小demo,大概就是这样子。 输入任意网址,生成出二维码。移动端不能直接将canvas生成出来的二维码保存为图片(pc端可以),所以将其直接转换成了图片。
demo的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>生成二维码</title>
<script src=”jquery.min.js”></script>
<script src=”qrcode.min.js”></script>
<style>
body{
text-align: center;
}
#qrcode{
margin:100px auto;
}
#text{
width: 200px;height: 100px;
border:1px solid #ccc;
}
#codeImg {
width: 300px;
height: 300px;
margin:0 auto;
}
</style>
</head>
<body>
<input type=”text” id=”text” placeholder=”请输入要生成二维码的文本”>
<input type=”button” id=”create” value=”生成二维码”>
<br>
<div id=”qrcode”></div>
<div id=”codeImg”>
<img src=”” alt=”” />
</div>
<script type=”text/javascript”>
$(‘#create’).click(function(){
$(‘#qrcode’).html(”).qrcode({
text: $(‘#text’).val()
});
// canvas转换成图片
var codeImg = $(‘#qrcode’).find(‘canvas’)[0].toDataURL(“image/png”);
$(“#codeImg img”).attr(“src”,codeImg);
});
</script>
</body>
</html>