一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用qrcode生成二维码并实现当前页面截图
advertisement

使用qrcode生成二维码并实现当前页面截图

最近一个项目碰到一个功能,就是一个产品详情页需要生成一张海报用来发朋友圈用的。。。
那么涉及到的技术大概就是:1、怎么生成二维码(使用当前产品详情页的链接,别人扫码直接进入该详情页); 2、怎么实现截图并下载
或不多说,直接上自己随便写的一个Demo的代码了

  1. <html>    
  2.     <head>  
  3.     <style>  
  4.         .box {  
  5.             width: 100%;  
  6.             height: 300px;  
  7.             background-color: pink;  
  8.             overflow: hidden;  
  9.             text-align: center;  
  10.         }  
  11.         .box span{font-size: 16px;color: #000;}  
  12.     </style>    
  13.         <meta name="layout" content="main">    
  14.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
  15.         <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>    
  16.         <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>  
  17.         <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>   
  18.     </head>    
  19.     <body>     
  20.         <div class='box'>  
  21.             <span>www.zhangren.online</span>  
  22.             <span>www.zhangren.online</span>  
  23.             <div id="qrcode"></div>  
  24.         </div>  
  25.         <input  type="button" value="生成海报" id="input_box">  
  26.         <a href="" class="download" download="download_image">下载海报</a>  
  27.     </body>    
  28.      <script type="text/javascript" >    
  29.         $('#qrcode').qrcode({ width: 150, height: 150, text: 'https://www.zhangren.online' });  
  30.         $("#input_box").click(function(event){  
  31.             $(this).css('display','none');  
  32.             $('.download').css('display','none');  
  33.             event.preventDefault();    
  34.             html2canvas(document.body).then(function(canvas) {  
  35.                 var dataUrl = canvas.toDataURL();  
  36.                 var newImg = document.createElement("img");  
  37.                 newImg.className = 'created_img';  
  38.                 newImg.src =  dataUrl;  
  39.                 document.body.appendChild(newImg);  
  40.             });    
  41.             $('.box').css('display','none');   
  42.             $('.download').css('display','block');  
  43.             /*获取海报图片(base64位的)*/  
  44.             setTimeout(function(){/*不加定时器不知道为什么下面出来的src是undefind^_^*/  
  45.                 var download_img = $(".created_img").attr("src");  
  46.                 $('.download').attr('href',download_img)  
  47.             },100)  
  48.         })   
  49.           
  50.         </script>    
  51. </html>   
可能还有别的更好的方法,有幸的话加微信交流^_^
zhangren.online
上一篇:鼠标点击时出现小心心
下一篇:页面导航和吸顶功能js代码

您可能喜欢

​如何将自己写的代码上传到github上

​如何将自己写的代码上传到github上

​es6常用数组操作及技巧汇总

​es6常用数组操作及技巧汇总

​jQuery数字字母组合验证码

​jQuery数字字母组合验证码

回到顶部