jQuery 获取canvas里面的base64的二维码图片地址,并显示在img中

版权声明:本文为博主原创文章,未经博主允许不得转载。 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>

猜你喜欢

转载自blog.csdn.net/qq_21891743/article/details/81449480