零基础建站培训介绍

当前位置:

如何让手机网站上二维码能够长按识别

特别近有一些学习如何建网站的学员咨询如何在自己的手机网站上实现二维码长按识别的功能,下面讲一下如何在网站上实现二维码长按识别的方法。下面的方法涉及到代码知识,如果你不懂,可以先学习一下零基础建站教程HTML代码知识

方法/步骤

  1. 在自己的网页中引入JS库;
    
    
    <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
  2. 在网页需要显示二维码的位置放一个空的div;
    
    
    <div id="qrDiv"></div>
  3. 使用以下的代码生成二维码。注意:这个时候生成的二维码在微信中长安没任意反应,因为qrcode生成的是canvas标签而不是img标签。
    
    
    $("#qrDiv").qrcode({
    width: 120, //宽度
    height:120, //高度
    text: "需要生成的二维码内容" //任意内容
    });
  4. 将canvas标签转换为img标签.
    
    
    //从 canvas 提取图片 image
    function convertCanvasToImage(canvas) {
    //新Image对象,可以理解为DOM
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
    // 指定格式 PNG
    image.src = canvas.toDataURL("image/png");
    return image;
    }
    //获取网页中的canvas对象
    var mycanvas1=document.getElementsByTagName('canvas')[0];
    //将转换后的img标签插入到html中
    var img=convertCanvasToImage(mycanvas1);
    $('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id

完成上述步骤后就可以在自己建网站时实现二维码长按识别了。

上一课: 下一课:

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 网站上引用一些视频,如何让这些视频既支持电脑播放,又支持手机播放,我们可以通过 iframe 调用的方式来解决这个问题。首先让我们来了解一下<
  • 手机网站快速建站方法 图文教程 (16846 次浏览)
    在学做网站论坛的手机建站课程中讲到了如何通过代码方式建网站,今天介绍一个手机网站快速建站方法,通过下面的方法可以快速建立与PC网站同步的手机网
  • 制作自适应手机网站视频教程:https://www.xuewangzhan.net/gonggao/16271.html如果想让自己做的静态网页与动态程序结合在一起,就必须将静态页
  • 代码介绍带微信二维码在线客服代码,绿色风格,简洁,清新,默认在线客服显示在页面右边中部位置,点击收缩,可以添加QQ号,微信二维码,客户服务热
  • 做好一个网站之后,网站有大量的网页,如何让每个网页都自动生成二唯码呢?其实并不难,使用jQuery和qrcode.min.js插件就可以实现网站每个网页自动生
  • 特别近有一些学习如何建网站的学员咨询如何在自己的手机网站上实现二维码长按识别的功能,下面讲一下如何在网站上实现二维码长按识别的方法。下面的方