zoukankan      html  css  js  c++  java
  • 前端生成二维码

    最近在做一个移动端项目,想实现点击按钮生成一个分享的二维码。

    而项目一开始就是基于jquery2.0开发的,所以第一开始就JQ的插件,搜到jquery.qrcode.js,它支持以二种方式生成二维码,在支持canvas的现代浏览器下使用canvas来生成分享二维码,

    在IE低版本等很搓的浏览器下使用table生成二维码图片,使用说明如下:

    1、首先在页面中加入jquery库文件和qrcode插件。

    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="jquery.qrcode.min.js"></script> 

    2、在页面中需要显示二维码的地方加入以下代码:

    <div id="code"></div> 

    3、调用qrcode插件。

    qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5。直接调用如下:

    $('#code').qrcode("http://www.helloweba.com"); //任意字符串 

    您也可以通过以下方式调用:

    $("#code").qrcode(
        render: "table", //table方式 
         200, //宽度 
        height:200, //高度 
        text: "www.helloweba.com" //任意内容 
    }); 

    这样就可以在页面中直接生成一个二维码,你可以用手机“扫一扫”功能读取二维码信息。

    4识别中文

    我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,

    在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:

    function toUtf8(str) {    
        var out, i, len, c;    
        out = "";    
        len = str.length;    
        for(i = 0; i < len; i++) {    
            c = str.charCodeAt(i);    
            if ((c >= 0x0001) && (c <= 0x007F)) {    
                out += str.charAt(i);    
            else if (c > 0x07FF) {    
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));    
                out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));    
                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
            else {    
                out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));    
                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
            }    
        }    
        return out;    

    以下示例:

    var str = toUtf8("钓鱼岛是中国的!"); 
    $('#code').qrcode(str);
    以上内容摘抄自:http://www.helloweba.com/view-blog-226.html

    但是发现在生成二维码的时候发现扫了半天没反应,或者根本扫不上,个人感觉主要是我这个项目是以REM布局,而在生成二维码的时候又不能以REM为单位,同时又为了保证移动端1PX的实现,使用了像素比缩放,

    导致生成的二维码难识别。

    后面在segmentfault发现有一个大牛提到使用第三方服务。

    于是右键复制链接才发现其中规则:http://pan.baidu.com/share/qrcode?w=150&h=150&url=https://www.baidu.com

    这个应该是百度一个二维码生成接口,相当于是一个get请求,其中W为150PX,h为150PX,url为是想要生成链接的二维码,于是通过img的src属性成功生成了想要二维码,而且生成的二维码是图片格式,不会有什么兼容问题,

    扫码识别也很快,果断使用这个方式去实现。

    这位大牛留言如下:

    在做二维码分享的时候希望通过带hash值的方式去判断分享来源,发现这样是行不通的,不知道是生成二维的时候还是浏览器默认行为会把除#号后的值全部删除,无奈改成传参方式,应该生成二维码的方式还有很多种,期待更多的人分享那些难得的巧技。

  • 相关阅读:
    Why Choose Jetty?
    Jetty 的工作原理以及与 Tomcat 的比较
    Tomcat设计模式
    Servlet 工作原理解析
    Tomcat 系统架构
    spring boot 打包方式 spring boot 整合mybaits REST services
    wireshark udp 序列号 User Datagram Protocol UDP
    Maven 的聚合(多模块)和 Parent 继承
    缓存策略 半自动化就是mybaitis只支持数据库查出的数据映射到pojo类上,而实体到数据库的映射需要自己编写sql语句实现,相较于hibernate这种完全自动化的框架我更喜欢mybatis
    Mybatis解决sql中like通配符模糊匹配 构造方法覆盖 mybits 增删改
  • 原文地址:https://www.cnblogs.com/xwwin/p/6021271.html
Copyright © 2011-2022 走看看