mnahkies / ng-qrcode Goto Github PK

View Code? Open in Web Editor NEW

51.0 51.0 9.0 3.73 MB

Easy to use AOT compatible QR code generator for Angular projects.

Home Page: https://mnahkies.github.io/ng-qrcode/

License: MIT License

JavaScript 12.66% HTML 16.19% TypeScript 66.72% SCSS 4.16% Shell 0.27%

angular angular2 qrcode-generator

ng-qrcode's People

Contributors

Stargazers

Watchers

Forkers

prabhatligal j-fulbright best-of-angular mustafapsd hopdq91 regazzoj cloudinnovates ludufre johnnybarton411

ng-qrcode's Issues

Angular 12 support

Update DEPs to support angular 12

Image in the center of the QR code

Hello, i would like to ask if it is possible to add a custom image in the center of the QR code that is generated with the library.

I have observed that this library depends on another one called "qrcode" and I consulted a little bit, I could see that it is possible to insert an image in the center of the QR code that is generated.

https://stackoverflow.com/questions/53898890/how-to-generate-qr-code-together-with-the-image-in-a-center#answers-header

Can you tell me how to do this? Thank you very much for the help you can give me

Add ability to set accessibility attributes on the canvas element

Wondering about the possibility of an accessibility enhancement to set a couple basic accessibility attributes on the canvas element. Maybe even add them by default (i.e. default to accessible). Right now I'm setting these values on the qr-code component, which isn't really ideal. Thinking something like the following. I'm open to submitting a PR for this.

Default:

<!-- helloWorld = 'Hello World!"' -->
<qr-code [value]="helloWorld"></qr-code>

// Output:
// <canvas ... aria-label="Image of a custom QR code with the following content: {{ helloWorld }}" role="img">

Overrides:

<!-- helloWorld = 'Hello World!"' -->
<qr-code [value]="helloWorld" [ariaLabel]="'Custom aria label text'"></qr-code>

// Output:
// <canvas ... aria-label="Custom aria label text" role="img">

caught ReferenceError: global is not defined

Great library!

For some reason, today ng-qrcode failed with a big fat error.

Uncaught ReferenceError: global is not defined
    at Object.../../node_modules/node-libs-browser/node_modules/buffer/index.js (index.js:43)
    at __webpack_require__ (bootstrap:79)
    at Object.../../node_modules/qrcode/lib/core/reed-solomon-encoder.js (reed-solomon-encoder.js:3)
    at __webpack_require__ (bootstrap:79)
    at Object.../../node_modules/qrcode/lib/core/qrcode.js (qrcode.js:10)
    at __webpack_require__ (bootstrap:79)
    at Object.../../node_modules/qrcode/lib/browser.js (browser.js:4)
    at __webpack_require__ (bootstrap:79)
    at Module.../../node_modules/ng-qrcode/fesm2015/ng-qrcode.js (ng-qrcode.js:1)

I did some Googling and found:
global is not available as of Angular 6.

Library authors should not depend on this property. See this post: angular/angular-cli#9827 (comment)

As a workaround for now, I am putting this is my polyfills.ts
(window as any).global = window;

Angular V17 support

Hi.
Please add support for Angular 17

Can't install on Angular 13

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@">=12 <13" from [email protected]
npm ERR! node_modules/ng-qrcode
npm ERR!   ng-qrcode@"^5.0.0" from the root project

CommonJS or AMD dependencies can cause optimization bailouts

Warning: /Users/xxx/projects/xxx/node_modules/.pnpm/[email protected]_97c374658fb8cefbe875884a7f473e47/node_modules/ng-qrcode/fesm2015/ng-qrcode.mjs depends on 'qrcode'. CommonJS or AMD dependencies can cause optimization bailouts.
[0] For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

This is the warning that I get when using the latest version of the package [email protected].

Is there any way to make the QR Code size responsive without workarounds?

Resizing the qr-code element using view port height/width is not working. The DOM element is reduced but the actually displayed code will remain the same size no matter what happens.

I would probably be able to resize the qr-code every time that the size of the window changes by binding the size to a value in my typescript file but that doesn't sound like a good workaround.

Am i just missing something or is there currently no simple solution to achieve responsiveness?

Upgrade to Angular 18 and above

Hi, In order not to block upgrades to newer versions of Angular, you could move your Angular dependencies to devEependencies, and thus allowing users to install any version they want :)

See https://github.com/VadimDez/ng2-pdf-viewer/blob/master/package.json for insiration.

Is it possible to access the QR image for me to add a `Download image` button?

I've inspected the QR element via a browser but i'm not seeing where the data is that creates the image?

Is there a method I could use to access the base64 string (assuming it's base64) ?

Padding and qr size

Why is there so much padding?

When I'm setting the size to 300px I would expect that to be without padding, or is that just me?

QR-Code not displayed in Google Chrome when center image is defined

Description:

We are using the ng-qrcode library ^7.0.0 in our Angular project to display qr-codes for a specific URL. This issues was found using the Google Chrome browser. We tested different browsers on our end. You can see the browsers and versions below. The only Browser that had such problems was Google Chrome. All other browsers were working as expected with a center image in the qr-code.

Issue Reproduction:

When we first fetch the data and create a qr-code url the qr-code is properly displayed in our UI.

When we send a second request, fetch new data and re-create the qr-code url, the qr-code is not displayed anymore.

A workaround for this issue was to simply remove the center image from the code and everything was running fine again in Google Chrome. We assume there might be an issue within the library.


<qr-code [value]="qrCodeUrl"></qr-code>

Versions:

We tested this issue in

Google Chrome (v. 105.0.5195.127)
Firefox (v. 105.0.1)
Opera GX (v. 90.0.4480.117)
MS Edge (v. 105.0.1343.50).
ng-qrcode (v. ^7.0.0)

QRCode does not show when printed with NgxPrint

Similar to the issue reported here https://stackoverflow.com/questions/62400691/using-ngx-print-to-print-ngx-qrcode, the QRCode generated by this library is not visible when attempting to print a page.

The recommended solution per the stackoverflow article was to use toDataURL() and render and image instead of the canvas.

If there is a way to make it work with canvas it would be ideal, but if not, is it possible to update this library to provide the option to render out as an image instead?

Support for colors

Good morning,

Great job on the QR code, i like that it supports the center image.

Other packages support specifying the light and dark color of the QR code. How's that possible with this package?

For example:

<qr-code [value]="address" size="120" errorCorrectionLevel="H" margin="1" centerImageSrc="assets/images/logoicon-qr.png" [darkcolor]="'#2a3042'">

It's often used for branding, so that in this case, the black squares become dark blue.

Can't install on Angular 14

Hello !
Thanks for maintaining this project !
I use it in a project and when I upgrade Angular to v14, I run into a dependency problem =>

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@">=13 <14" from [email protected]
npm ERR! node_modules/ng-qrcode
npm ERR!   ng-qrcode@"^6.0.0" from the root project

I did a PR to resolve this issue, if you can have a look and tell me if I need to change something.

Thanks !

Angular v16 support

Needs support Angular v16

Anybody else having issues showing the logo?

I already downloaded the package and can display the QR Code but when adding the path to the logo I want to display no logo is shown at all. I've tried using absolute and relavive paths, moving the image to the same folder, pointing to other external website images, changing file formats but nothing works.

Has someone else encountered this issue?

Support Angular 10

npm WARN [email protected] requires a peer of @angular/common@>=7 <10 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@>=7 <10 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of tslib@^1.10.0 but none is installed. You must install peer dependencies yourself.

Angular 9 upgrade please?

this lib is broken on current Angular

I installed and got several errors, I don't think its useable now.


Build at: 2021-07-26T16:43:30.541Z - Hash: dfa3be7d241a04bd8c3b - Time: 1821ms

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 75:173-191
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 118:143-161
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 161:137-155
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 77:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 130:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 168:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 119:23-46
"export 'ɵɵngDeclareComponent' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 76:23-46
"export 'ɵɵngDeclareDirective' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 75:23-44
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 118:23-44
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 161:20-41
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 165:20-42
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ng-qrcode/fesm2015/ng-qrcode.js 162:20-42
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'


    
    Error: node_modules/ng-qrcode/lib/qr-code.component.d.ts:9:21 - error TS2694: Namespace '"....angular/cardanoshop/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    9     static ɵfac: i0.ɵɵFactoryDeclaration<QrCodeComponent, never>;
                          ~~~~~~~~~~~~~~~~~~~~
    node_modules/ng-qrcode/lib/qr-code.component.d.ts:10:21 - error TS2694: Namespace '"....angular/cardanoshop/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.
    
    10     static ɵcmp: i0.ɵɵComponentDeclaration<QrCodeComponent, "qr-code", never, { "value": "value"; "size": "size"; "errorCorrectionLevel": "errorCorrectionLevel"; "centerImageSrc": "centerImageSrc"; "centerImageSize": "centerImageSize"; }, {}, never, never>;
                           ~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng-qrcode/lib/qr-code.directive.d.ts:19:21 - error TS2694: Namespace '"....angular/cardanoshop/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    19     static ɵfac: i0.ɵɵFactoryDeclaration<QrCodeDirective, never>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/ng-qrcode/lib/qr-code.directive.d.ts:20:21 - error TS2694: Namespace '"....angular/cardanoshop/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
    
    20     static ɵdir: i0.ɵɵDirectiveDeclaration<QrCodeDirective, "canvas[qrCode]", never, { "value": "qrCode"; "version": "qrCodeVersion"; "errorCorrectionLevel": "qrCodeErrorCorrectionLevel"; "width": "width"; "height": "height"; "centerImageSrc": "qrCodeCenterImageSrc"; "centerImageWidth": "qrCodeCenterImageWidth"; "centerImageHeight": "qrCodeCenterImageHeight"; }, {}, never>;
                           ~~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng-qrcode/lib/qr-code.module.d.ts:6:21 - error TS2694: Namespace '"....angular/cardanoshop/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    6     static ɵfac: i0.ɵɵFactoryDeclaration<QrCodeModule, never>;
                          ~~~~~~~~~~~~~~~~~~~~
    node_modules/ng-qrcode/lib/qr-code.module.d.ts:7:21 - error TS2694: Namespace '"....angular/cardanoshop/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
    
    7     static ɵmod: i0.ɵɵNgModuleDeclaration<QrCodeModule, [typeof i1.QrCodeComponent, typeof i2.QrCodeDirective], [typeof i3.CommonModule], [typeof i1.QrCodeComponent, typeof i2.QrCodeDirective]>;
                          ~~~~~~~~~~~~~~~~~~~~~
    node_modules/ng-qrcode/lib/qr-code.module.d.ts:8:21 - error TS2694: Namespace '"....angular/cardanoshop/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
    
    8     static ɵinj: i0.ɵɵInjectorDeclaration<QrCodeModule>;
                          ~~~~~~~~~~~~~~~~~~~~~

ansi-regex package needs to be updated

Hello,
ansi-regex cause Moderate vulnerability with the following error:
Inefficient Regular Expression Complexity in chalk/ansi-regex
ansi-regex needs to be updated up to version 5.0.1 or higher.
check here for more details: (GHSA-93q8-gq69-wqmw)

Option to render as img instead of canvas?

While trying to print a div containing a component, by using document.getElementById('div-to-print').innerHTML, the graphic data in the canvas is not getting copied over.
I'm currently using a work around, where I copy the canvas data over, converting to an img tag with a toDataURL.

I was thinking, if ng-qrcode could insert a img tag, instead of a canvas, with a flag. It would make things a lot easier.

Example code:

    let pageContents = document.createElement('div');
    pageContents.innerHTML = document.getElementById(divId).innerHTML;

    const canvas = Array.from(document.getElementsByTagName('canvas'));
    const canvasClone = Array.from(pageContents.getElementsByTagName('canvas'))

    for (var i = 0; i < canvas.length; i++) {
      let img = document.createElement('img');
      img.className = canvas[i].className;
      img.style.cssText = canvas[i].getAttribute('style');
      img.src = canvas[i].toDataURL();
      canvasClone[i].parentNode.replaceChild(img, canvasClone[i]);
    };

How to print the QR code?

How do I print the generated QR code?