www.qjdy.com-奇迹赌场 > www.qjdy.com官网 > qrcode其实是通过计算

原标题:qrcode其实是通过计算

浏览次数:175 时间:2019-08-15

JavaScript的就学--生成二维码,javascript--

有一部分耗cpu的计量,完全能够在客户端上计算,例如生成二维码。

qrcode其实是通过总结,然后利用jquery达成图形渲染和图案。扶助canvas和table二种办法生成我们所需的二维码。

现实用法

qrcode是jquery组件,须要至少七个js, 正是 jquery 和 jquery.qrcode。能够到 

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

在页面上,供给显示二维码的地方投入贰个空成分(此处用div)

<div id="qrcode"></div>

在急需生成二维码的时候,调用一下语句直接扭转。

$("#qrcode").qcrode("http://www.cnblogs.com/CraryPrimitiveMan/");//需要生成的页面

详见参数

参数 默认值 说明
render canvas 渲染方式,支持canvas和table
width 宽度
height 高度
text 需要生成的url

 

 

 

 

 

如:

$("#qrcode").qcrode({
    render: "table",
    width: 200,
    height: 200,
    text: "http://www.cnblogs.com/CraryPrimitiveMan/"
});

消除url中有粤语方法

咱俩试验的时候开掘无法辨别汉语内容的二维码,通过寻觅多方资料驾驭到,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;    
}

下载二维码

用前端画出来的二维码,不是贰个canvas正是贰个table,怎样下载呢?大家只供给将canvas的从头到尾的经过画到image上,下载下来就可以。

function download(canvasElem, filename, imageType) {
    var event, saveLink, imageData, defalutImageType;
    defalutImageType = 'png';//定义默认图片类型
    imageData = canvasElem.toDataURL(imageType || defalutImageType);//将canvas元素转化为image data
    saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = imageData;
    saveLink.download = filename;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    saveLink.dispatchEvent(event);
};

在angular中的简单包装

在angular中选用,能够封装成directive。然而要保管已经引进了此前的七个js文件。

var appModule = angular.module('app', []);
appModule.directive('qrcode', function() {
    return {
        restrict: "A",
        scope: {
          text    : '=',
          options : '='
        },
        link: function(scope, elem, attrs) {
          var $elem, options;
          $elem = $(elem);
          options = { //获取元素的宽度和高度
            width: $elem.width(),
            height: $elem.height()
          };
          angular.extend(options, scope.options);
          scope.$watch('text', function(newText) {
            if (newText) {
              options.text = newText;
              $(elem).qrcode(options);//重新生成二维码
            }
          });
        };
    };
});

下载的方法在angular中得以封装成贰个service使用。

参考:

有一部分耗cpu的计量,完全可以在客户端上测算,比方生成二维码。 qrcode其实是通过总括,然后使用...

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com官网,转载请注明出处:qrcode其实是通过计算

关键词: LG赛马游戏

上一篇:如需引入外部Js需刷新才能执行

下一篇:没有了