ASW QR Code - customizable design and logos.

ASW QR Code library is a customizable QR Code generator with options to add personalized design and logos, designed specifically for
Angular projects.

ASW QR code demo

Contributing Guidelines · Submit an Issue · Blog

Install ASW QR Code

Install QR Code to set up in the project by running the following command:

npm install @asoftwareworld/qrcode

Import the component modules

Import the NgModule for each component you want to use:

import { AswQrCodeModule } from '@asoftwareworld/qrcode';
// ...

@NgModule({
  imports: [
    // shown passing global defaults (optional)
    AswQrCodeModule
    ...
  ]
  // ...
})
export class AppModule {}

Add a selector to HTML

In your template, use the component selector:

<div class="card">
    <div class="header">
        <h2>QR code</h2>
    </div>
    <div class="body">
        <div class="row">
            <div class="col-md-12 text-center">
                <div class="qrcodeImage">
                    <asw-qr-code #parent [qrData]="qrdata" [width]="option.width" [height]="option.height"
                        [outerMargin]="option.outerMargin" [type]="option.type" [allowEmptyString]="true"
                        [logo]="option.logo"
                        [density]="option.density" [backgroundColor]="option.backgroundColor"
                        [logoStyle]="option.logoStyle" [middleShape]="option.middleShape"
                        [cornerInnerShape]="option.cornerInnerShape" [cornerOuterShape]="option.cornerOuterShape">
                    </asw-qr-code>
                </div>
                <div class="downloadButton">
                    <button mat-icon-button [matMenuTriggerFor]="menu" matTooltip="Download QR Code">
                        <mat-icon>download</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="parent.download({extension: 'svg', name: 'asw'})">
                            <span>SVG</span>
                        </button>
                        <button mat-menu-item (click)="parent.download({extension: 'png', name: 'asw'})">
                            <span>PNG</span>
                        </button>
                        <button mat-menu-item (click)="parent.download({extension: 'jpeg', name: 'asw'})">
                            <span>JPEG</span>
                        </button>
                        <button mat-menu-item (click)="parent.download({extension: 'webp', name: 'asw'})">
                            <span>WEBP</span>
                        </button>
                    </mat-menu>
                </div>
            </div>
        </div>
    </div>
</div>

Define in your component to get published event :

export class AppComponent implements OnInit {
    title = 'ASW QR Code Demo';
    option: any;
    drawTpes = [
        { label: 'SVG', value: 'svg' },
        { label: 'Canvas', value: 'canvas' },
    ];
    density: Density = {
        errorCorrectionLevel: 'Q',
        mode: 'Byte',
        typeNumber: 0
    };

    logoStyle: LogoStyle = {
        hideBackgroundCircle: true,
        logoSize: 0.3,
        logoMargin: 0
    };

    backgroundColor = '#ffffff';

    middleShape: MiddleShape = {
        color: '#000',
        type: 'circle'
    };

    cornerInnerShape: CornerInnerShape = {
        color: '#000',
        type: 'circle'
    };

    cornerOuterShape: CornerOuterShape = {
        color: '#000',
        type: 'rounded'
    };
    public qrdata = 'https://asoftwareworld.com';
    image = '';
    ngOnInit(): void {
        this.option = {
            width: 200,
            height: 200,
            type: 'canvas',
            logo: this.image,
            outerMargin: 0,
            density: this.density,
            backgroundColor: this.backgroundColor,
            logoStyle: this.logoStyle,
            cornerInnerShape: this.cornerInnerShape,
            cornerOuterShape: this.cornerOuterShape,
            middleShape: this.middleShape
        };
    }
}

List of Input parameters

Density property

Middle Shape property

Corner Inner Shape property

Corner Outer Shape property

Download QR code

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Report a bug

We use GitHub Issues as the official bug tracker for the ASW QR Code. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the ASW QR Code.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help please email asoftwareworld@gmail.com

License

MIT

Social Media

Twitter: https://twitter.com/asoftwareworld

LinkedIn: https://in.linkedin.com/company/asoftwareworld

Youtube: https://www.youtube.com/@asoftwareworld

Facebook: https://www.facebook.com/asoftwaresworld

Donate

If you found value in ASW QR Code or a contributor helped you out of a jam, consider becoming a contributor yourself.