版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_21891743/article/details/81449480
大家知道一款很火的二维码生成工具qrcode.js,这是一款基于jQuery的二维码生成插件,能将任意的文字转化为一个二维码,通过canvas的方式呈现,但是有些时候我们需要取出里面的url,今天就一起来做做这个事情。
<!doctype html>
<html lang="en">
<head>
<meta name="Description" content="">
<title>测试canvas</title>
<!--引入js-->
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
<script src="http://www.jq22.com/js/jquery.qrcode.min.js"></script>
</head>
<body>
<script>
//创建一个隐藏的div
$('body').append('<div style="display:none;" id="qrcode_xp"></div>');
//绑定上面的div生成一个二维码
$('#qrcode_xp').qrcode('your content');
var ca=$("#qrcode_xp").find("canvas")[0];
//获取二维码中的图片地址
var src_xp=ca.toDataURL('image/jpeg');
var img_xp='<img style="width:60px;" src="'+src_xp+'">';
//组装地址作为一个新的图片,并且通过控制台查看图片信息
console.log(img_xp);
//将一段文本中的文字替换为这个图片
//str = str.replace('$xpqrcode$', getRightStr(img_xp));
//移除之前创建的隐藏的canvas
$('#qrcode_xp').remove();
</script>
</body>
</html>