基于angular生成二维码

来源：互联网发布：知乎引流话术编辑：程序博客网时间：2024/05/15 23:48

生成二维码主要是基于jquery的qrcode.js。通过qrcode加上ng生成二维码这个例子github也有，本人为了以后学习方便就转载了。

index.html

<div class="key-padding key-padding-vertical">    <h4>JS生成二维码。</h4><div style="text-align: center">    <qr text="qrcodeString" type-number="typeNumber" correction-level="correctionLevel" size="size" input-mode="inputMode" image="image"></qr></div>    <textarea class="form-control" ng-model="qrcodeString">    </textarea></div>

ctrl.js

$scope.qrcodeString = 'YOUR TEXT TO ENCODE';        $scope.size = 250;        $scope.correctionLevel = '';        $scope.typeNumber = 0;        $scope.inputMode = '';        $scope.image = true;

angular.modal

.controller('QrCtrl', ['$scope', function($scope){        $scope.getTypeNumeber = function(){            return $scope.typeNumber || 0;        };        $scope.getCorrection = function(){            var levels = {                'L': 1,                'M': 0,                'Q': 3,                'H': 2            };            var correctionLevel = $scope.correctionLevel || 0;            return levels[correctionLevel] || 0;        };        $scope.getText = function(){            return $scope.text || '';        };        $scope.getSize = function(){            return $scope.size || 250;        };        $scope.isNUMBER = function(text){            var ALLOWEDCHARS = /^[0-9]*$/;            return ALLOWEDCHARS.test(text);        };        $scope.isALPHA_NUM = function(text){            var ALLOWEDCHARS = /^[0-9A-Z $%*+\-./:]*$/;            return ALLOWEDCHARS.test(text);        };        $scope.is8bit = function(text){            for (var i = 0; i < text.length; i++) {                var code = text.charCodeAt(i);                if (code > 255) {                    return false;                }            }            return true;        };        $scope.checkInputMode = function(inputMode, text){            if (inputMode === 'NUMBER' && !$scope.isNUMBER(text)) {                throw new Error('The `NUMBER` input mode is invalid for text.');            }            else if (inputMode === 'ALPHA_NUM' && !$scope.isALPHA_NUM(text)) {                throw new Error('The `ALPHA_NUM` input mode is invalid for text.');            }            else if (inputMode === '8bit' && !$scope.is8bit(text)) {                throw new Error('The `8bit` input mode is invalid for text.');            }            else if (!$scope.is8bit(text)) {                throw new Error('Input mode is invalid for text.');            }            return true;        };        $scope.getInputMode = function(text){            var inputMode = $scope.inputMode;            inputMode = inputMode || ($scope.isNUMBER(text) ? 'NUMBER' : undefined);            inputMode = inputMode || ($scope.isALPHA_NUM(text) ? 'ALPHA_NUM' : undefined);            inputMode = inputMode || ($scope.is8bit(text) ? '8bit' : '');            return $scope.checkInputMode(inputMode, text) ? inputMode : '';        };    }])    .directive('qr', ['$timeout', '$window', function($timeout, $window){        return {            restrict: 'E',            template: '<canvas ng-hide="image"></canvas><img ng-if="image" ng-src="{{canvasImage}}"/>',            scope: {                typeNumber: '=',                correctionLevel: '=',                inputMode: '=',                size: '=',                text: '=',                image: '='            },            controller: 'QrCtrl',            link: function postlink(scope, element, attrs){                if (scope.text === undefined) {                    throw new Error('The `text` attribute is required.');                }                var canvas = element.find('canvas')[0];                var canvas2D = !!$window.CanvasRenderingContext2D;                scope.TYPE_NUMBER = scope.getTypeNumeber();                scope.TEXT = scope.getText();                scope.CORRECTION = scope.getCorrection();                scope.SIZE = scope.getSize();                scope.INPUT_MODE = scope.getInputMode(scope.TEXT);                scope.canvasImage = '';                var draw = function(context, qr, modules, tile){                    for (var row = 0; row < modules; row++) {                        for (var col = 0; col < modules; col++) {                            var w = (Math.ceil((col + 1) * tile) - Math.floor(col * tile)),                                h = (Math.ceil((row + 1) * tile) - Math.floor(row * tile));                            context.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';                            context.fillRect(Math.round(col * tile), Math.round(row * tile), w, h);                        }                    }                };                var render = function(canvas, value, typeNumber, correction, size, inputMode){                    var trim = /^\s+|\s+$/g;                    var text = value.replace(trim, '');                    var qr = new QRCode(typeNumber, correction, inputMode);                    qr.addData(text);                    qr.make();                    var context = canvas.getContext('2d');                    var modules = qr.getModuleCount();                    var tile = size / modules;                    canvas.width = canvas.height = size;                    if (canvas2D) {                        draw(context, qr, modules, tile);                        scope.canvasImage = canvas.toDataURL() || '';                    }                };                render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);                $timeout(function(){                    scope.$watch('text', function(value, old){                        if (value !== old) {                            scope.TEXT = scope.getText();                            scope.INPUT_MODE = scope.getInputMode(scope.TEXT);                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);                        }                    });                    scope.$watch('correctionLevel', function(value, old){                        if (value !== old) {                            scope.CORRECTION = scope.getCorrection();                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);                        }                    });                    scope.$watch('typeNumber', function(value, old){                        if (value !== old) {                            scope.TYPE_NUMBER = scope.getTypeNumeber();                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);                        }                    });                    scope.$watch('size', function(value, old){                        if (value !== old) {                            scope.SIZE = scope.getSize();                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);                        }                    });                    scope.$watch('inputMode', function(value, old){                        if (value !== old) {                            scope.INPUT_MODE = scope.getInputMode(scope.TEXT);                            render(canvas, scope.TEXT, scope.TYPE_NUMBER, scope.CORRECTION, scope.SIZE, scope.INPUT_MODE);                        }                    });                });            }        };    }])

好了在textarea中可以输入你的地址栏，注：暂不支持中文字符。

0 0