diff --git a/.gitignore b/.gitignore
index 40b878d..48e4eaa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-node_modules/
\ No newline at end of file
+node_modules/
+.npmrc
\ No newline at end of file
diff --git a/README.md b/README.md
index d78cd44..eaba328 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,12 @@
[](https://badge.fury.io/js/angular2-qrcode)
# angular2-qrcode
-angular2-qrcode is a component that you can easily integrate into your project. It relies on [qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) to generate QR Codes.
+angular2-qrcode is a component that you can easily integrate into your project. It relies on [qrious](https://github.com/neocotic/qrious) to generate QR Codes.
+
+## Breaking Changes for 2.0.0
+
+`data` has been replaced with `value`. For those that don't need the new features of `2.0.0`, just keep using `1.0.5`. No change will be needed unless you upgrade.
+
+The `type` field has also been removed.
## Install
@@ -27,7 +33,7 @@ import { QRCodeModule } from 'angular2-qrcode';
In component template:
```
-
+
```
@@ -42,7 +48,7 @@ import {QRCodeComponent} from 'angular2-qrcode';
directives: [QRCodeComponent],
template: `
-
+
`
})
@@ -52,14 +58,16 @@ import {QRCodeComponent} from 'angular2-qrcode';
| Attribute | Type | Default | Description |
| ------------- |-------------| -----|------------|
-| data | String | '' | Your data string |
-| size | Number | 128 | This is the height/width of your QR Code component |
-| level | String | 'M' | QR Correction level ('L', 'M', 'Q', 'H') |
-| type | Number | 4 | Buffer size for data string
-
-## Note
-
-If you have `code length overflow` errors, you need to increase the `[type]` value to increase the buffer for your data string.
+| value | String | '' | Your data string |
+| size | Number | 100 | This is the height/width of your QR Code component |
+| level | String | 'L' | QR Correction level ('L', 'M', 'Q', 'H') |
+| background | String | 'white' | The color for the background |
+| backgroundAlpha | Number | 1.0 | The opacity of the background |
+| foreground | String | 'black' | The color for the foreground |
+| foregroundAlpha | Number | 1.0 | The opacity of the foreground |
+| mime | String | 'image/png' | The mime type for the output image |
+| padding | Number | null | The padding around the QR Code |
+| canvas | Boolean | false | Will output a canvas element if true |
## License
MIT License
diff --git a/angular2-qrcode.d.ts b/angular2-qrcode.d.ts
index 4e6d1d0..08fdf7a 100644
--- a/angular2-qrcode.d.ts
+++ b/angular2-qrcode.d.ts
@@ -2,10 +2,16 @@ import { ElementRef, OnChanges, SimpleChanges } from '@angular/core';
export declare class QRCodeComponent implements OnChanges {
private elementRef;
ngOnChanges(changes: SimpleChanges): void;
- data: string;
- size: number;
- type: number;
+ background: string;
+ backgroundAlpha: number;
+ foreground: string;
+ foregroundAlpha: number;
level: string;
+ mime: string;
+ padding: number;
+ size: number;
+ value: string;
+ canvas: boolean;
constructor(elementRef: ElementRef);
generate(): void;
}
diff --git a/angular2-qrcode.js b/angular2-qrcode.js
index 721e88a..93e45ce 100644
--- a/angular2-qrcode.js
+++ b/angular2-qrcode.js
@@ -8,79 +8,125 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
-var core_1 = require('@angular/core');
-var qrcode = require("qrcode-generator");
+var core_1 = require("@angular/core");
+var QRious = require("qrious");
var QRCodeComponent = (function () {
function QRCodeComponent(elementRef) {
this.elementRef = elementRef;
- this.data = '';
- this.size = 128;
- this.type = 4;
- this.level = 'M';
+ this.background = 'white';
+ this.backgroundAlpha = 1.0;
+ this.foreground = 'black';
+ this.foregroundAlpha = 1.0;
+ this.level = 'L';
+ this.mime = 'image/png';
+ this.padding = null;
+ this.size = 100;
+ this.value = '';
+ this.canvas = false;
}
QRCodeComponent.prototype.ngOnChanges = function (changes) {
- console.log('ngOnChanges');
- for (var name in changes) {
- if (name == 'data') {
- this.generate();
- }
+ if ('background' in changes ||
+ 'backgroundAlpha' in changes ||
+ 'foreground' in changes ||
+ 'foregroundAlpha' in changes ||
+ 'level' in changes ||
+ 'mime' in changes ||
+ 'padding' in changes ||
+ 'size' in changes ||
+ 'value' in changes ||
+ 'canvas' in changes) {
+ this.generate();
}
};
QRCodeComponent.prototype.generate = function () {
try {
- var qr = qrcode(this.type, this.level);
- qr.addData(this.data);
- qr.make();
- var imgTagString = qr.createImgTag(this.type, 0);
var el = this.elementRef.nativeElement;
- el.innerHTML = imgTagString;
- var imgTagObject = el.firstElementChild;
- imgTagObject.width = this.size;
- imgTagObject.height = this.size;
+ el.innerHTML = '';
+ var qr = new QRious({
+ background: this.background,
+ backgroundAlpha: this.backgroundAlpha,
+ foreground: this.foreground,
+ foregroundAlpha: this.foregroundAlpha,
+ level: this.level,
+ mime: this.mime,
+ padding: this.padding,
+ size: this.size,
+ value: this.value
+ });
+ if (this.canvas) {
+ el.appendChild(qr.canvas);
+ }
+ else {
+ el.appendChild(qr.image);
+ }
}
catch (e) {
console.error("Could not generate QR Code: " + e.message);
}
};
- __decorate([
- core_1.Input(),
- __metadata('design:type', String)
- ], QRCodeComponent.prototype, "data", void 0);
- __decorate([
- core_1.Input(),
- __metadata('design:type', Number)
- ], QRCodeComponent.prototype, "size", void 0);
- __decorate([
- core_1.Input(),
- __metadata('design:type', Number)
- ], QRCodeComponent.prototype, "type", void 0);
- __decorate([
- core_1.Input(),
- __metadata('design:type', String)
- ], QRCodeComponent.prototype, "level", void 0);
- QRCodeComponent = __decorate([
- core_1.Component({
- moduleId: 'module.id',
- selector: 'qr-code',
- template: ''
- }),
- __metadata('design:paramtypes', [core_1.ElementRef])
- ], QRCodeComponent);
return QRCodeComponent;
}());
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", String)
+], QRCodeComponent.prototype, "background", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", Number)
+], QRCodeComponent.prototype, "backgroundAlpha", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", String)
+], QRCodeComponent.prototype, "foreground", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", Number)
+], QRCodeComponent.prototype, "foregroundAlpha", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", String)
+], QRCodeComponent.prototype, "level", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", String)
+], QRCodeComponent.prototype, "mime", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", Number)
+], QRCodeComponent.prototype, "padding", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", Number)
+], QRCodeComponent.prototype, "size", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", String)
+], QRCodeComponent.prototype, "value", void 0);
+__decorate([
+ core_1.Input(),
+ __metadata("design:type", Boolean)
+], QRCodeComponent.prototype, "canvas", void 0);
+QRCodeComponent = __decorate([
+ core_1.Component({
+ moduleId: 'module.id',
+ selector: 'qr-code',
+ template: ""
+ }),
+ __metadata("design:paramtypes", [core_1.ElementRef])
+], QRCodeComponent);
exports.QRCodeComponent = QRCodeComponent;
var QRCodeModule = (function () {
function QRCodeModule() {
}
- QRCodeModule = __decorate([
- core_1.NgModule({
- exports: [QRCodeComponent],
- declarations: [QRCodeComponent],
- entryComponents: [QRCodeComponent]
- }),
- __metadata('design:paramtypes', [])
- ], QRCodeModule);
return QRCodeModule;
}());
+QRCodeModule = __decorate([
+ core_1.NgModule({
+ exports: [QRCodeComponent],
+ declarations: [QRCodeComponent],
+ entryComponents: [QRCodeComponent]
+ }),
+ __metadata("design:paramtypes", [])
+], QRCodeModule);
exports.QRCodeModule = QRCodeModule;
//# sourceMappingURL=angular2-qrcode.js.map
\ No newline at end of file
diff --git a/angular2-qrcode.js.map b/angular2-qrcode.js.map
index a4c3289..3eebe03 100644
--- a/angular2-qrcode.js.map
+++ b/angular2-qrcode.js.map
@@ -1 +1 @@
-{"version":3,"file":"angular2-qrcode.js","sourceRoot":"","sources":["angular2-qrcode.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAOO,eAAe,CAAC,CAAA;AACvB,IAAY,MAAM,WAAM,kBAAkB,CAAC,CAAA;AAO3C;IAiBI,yBACY,UAAsB;QAAtB,eAAU,GAAV,UAAU,CAAY;QARzB,SAAI,GAAW,EAAE,CAAC;QAClB,SAAI,GAAW,GAAG,CAAC;QACnB,SAAI,GAAW,CAAC,CAAC;QACjB,UAAK,GAAW,GAAG,CAAC;IAM1B,CAAC;IAlBJ,qCAAW,GAAX,UAAY,OAAsB;QAC9B,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAC3B,GAAG,CAAC,CAAC,IAAI,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC;YACvB,EAAE,CAAC,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC;gBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpB,CAAC;QACL,CAAC;IACL,CAAC;IAaD,kCAAQ,GAAR;QACI,IAAI,CAAC;YACD,IAAI,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACvC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACtB,EAAE,CAAC,IAAI,EAAE,CAAC;YAEV,IAAI,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YACjD,IAAI,EAAE,GAAgB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;YACpD,EAAE,CAAC,SAAS,GAAG,YAAY,CAAC;YAC5B,IAAI,YAAY,GAAwC,EAAE,CAAC,iBAAiB,CAAC;YAC7E,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;YAC/B,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;QACpC,CAAE;QAAA,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACT,OAAO,CAAC,KAAK,CAAC,iCAA+B,CAAC,CAAC,OAAS,CAAC,CAAC;QAC9D,CAAC;IACL,CAAC;IA1BD;QAAC,YAAK,EAAE;;iDAAA;IACR;QAAC,YAAK,EAAE;;iDAAA;IACR;QAAC,YAAK,EAAE;;iDAAA;IACR;QAAC,YAAK,EAAE;;kDAAA;IAlBZ;QAAC,gBAAS,CAAC;YACP,QAAQ,EAAE,WAAW;YACrB,QAAQ,EAAE,SAAS;YACnB,QAAQ,EAAE,EAAE;SACf,CAAC;;uBAAA;IAsCF,sBAAC;AAAD,CAAC,AArCD,IAqCC;AArCY,uBAAe,kBAqC3B,CAAA;AAOD;IAAA;IAA4B,CAAC;IAL7B;QAAC,eAAQ,CAAC;YACN,OAAO,EAAE,CAAE,eAAe,CAAE;YAC5B,YAAY,EAAE,CAAE,eAAe,CAAE;YACjC,eAAe,EAAE,CAAE,eAAe,CAAE;SACvC,CAAC;;oBAAA;IAC0B,mBAAC;AAAD,CAAC,AAA7B,IAA6B;AAAhB,oBAAY,eAAI,CAAA"}
\ No newline at end of file
+{"version":3,"file":"angular2-qrcode.js","sourceRoot":"","sources":["angular2-qrcode.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/angular2-qrcode.ts b/angular2-qrcode.ts
index 1c9ebd3..262401f 100644
--- a/angular2-qrcode.ts
+++ b/angular2-qrcode.ts
@@ -6,24 +6,40 @@ import {
OnChanges,
SimpleChanges
} from '@angular/core';
-import * as qrcode from "qrcode-generator";
+import * as QRious from 'qrious';
@Component({
moduleId: 'module.id',
selector: 'qr-code',
- template: ''
+ template: ``
})
export class QRCodeComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
- if ('data' in changes) {
+ if ('background' in changes ||
+ 'backgroundAlpha' in changes ||
+ 'foreground' in changes ||
+ 'foregroundAlpha' in changes ||
+ 'level' in changes ||
+ 'mime' in changes ||
+ 'padding' in changes ||
+ 'size' in changes ||
+ 'value' in changes ||
+ 'canvas' in changes) {
this.generate();
}
}
+
+ @Input() background: string = 'white';
+ @Input() backgroundAlpha: number = 1.0;
+ @Input() foreground: string = 'black';
+ @Input() foregroundAlpha: number = 1.0;
+ @Input() level: string = 'L';
+ @Input() mime: string = 'image/png';
+ @Input() padding: number = null;
+ @Input() size: number = 100;
+ @Input() value: string = '';
- @Input() data: string = '';
- @Input() size: number = 128;
- @Input() type: number = 4;
- @Input() level: string = 'M';
+ @Input() canvas: boolean = false;
constructor(private elementRef: ElementRef) {
@@ -31,16 +47,25 @@ export class QRCodeComponent implements OnChanges {
generate() {
try {
- let qr = qrcode(this.type, this.level);
- qr.addData(this.data);
- qr.make();
-
- let imgTagString = qr.createImgTag(this.type, 0);
let el: HTMLElement = this.elementRef.nativeElement;
- el.innerHTML = imgTagString;
- let imgTagObject: HTMLImageElement = el.firstElementChild;
- imgTagObject.width = this.size;
- imgTagObject.height = this.size;
+ el.innerHTML = '';
+ let qr = new QRious({
+ background: this.background,
+ backgroundAlpha: this.backgroundAlpha,
+ foreground: this.foreground,
+ foregroundAlpha: this.foregroundAlpha,
+ level: this.level,
+ mime: this.mime,
+ padding: this.padding,
+ size: this.size,
+ value: this.value
+ });
+
+ if (this.canvas) {
+ el.appendChild(qr.canvas);
+ } else {
+ el.appendChild(qr.image);
+ }
} catch (e) {
console.error(`Could not generate QR Code: ${e.message}`);
}
diff --git a/package.json b/package.json
index 0407df2..dd5ad2b 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
{
"name": "angular2-qrcode",
- "version": "1.0.5",
+ "version": "2.0.0",
"description": "An Angular 2 component that generates a QR Code.",
"main": "angular2-qrcode.js",
"repository": {
"type": "git",
"url": "git+https://github.com/SuperiorJT/angular2-qrcode.git"
},
- "scripts": { },
+ "scripts": {},
"keywords": [
"qrcode",
"qr",
@@ -17,8 +17,14 @@
"2",
"ng2"
],
+ "files": [
+ "angular2-qrcode.d.ts",
+ "angular2-qrcode.js",
+ "angular2-qrcode.js.map",
+ "README.md"
+ ],
"dependencies": {
- "qrcode-generator": "^1.0.0"
+ "qrious": "^2.2.0"
},
"peerDependencies": {
"@angular/core": "^2.0.0"
diff --git a/qrcode-generator.d.ts b/qrcode-generator.d.ts
deleted file mode 100644
index c3378b8..0000000
--- a/qrcode-generator.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// interface QRCode {
-// addData(data: string) : void;
-// make() : void;
-//
-// createTableTag(cellSize: number, margin: number) : string;
-// createSvgTag(cellSize: number, margin: number) : string;
-// createImgTag(cellSize: number, margin: number) : string;
-// }
-//
-// declare module 'qrcode-generator' {
-// function qrcode(type: number, errorCorrectionLevel: string) : QRCode;
-// export = qrcode;
-// }
\ No newline at end of file