{"id":13729573,"url":"https://github.com/werthdavid/ngx-kjua","last_synced_at":"2025-04-09T12:04:43.027Z","repository":{"id":29697608,"uuid":"122461174","full_name":"werthdavid/ngx-kjua","owner":"werthdavid","description":"Angular QR-Code generator component using kjua.","archived":false,"fork":false,"pushed_at":"2024-03-29T07:25:55.000Z","size":3199,"stargazers_count":86,"open_issues_count":5,"forks_count":15,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-12T22:35:24.785Z","etag":null,"topics":["angular","kjua","qr-code","qr-generator","qrcode","qrcode-generator","qrcodes"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/werthdavid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-22T10:03:56.000Z","updated_at":"2024-05-28T08:52:25.104Z","dependencies_parsed_at":"2023-11-30T07:30:25.757Z","dependency_job_id":"85f7f57a-2f49-426b-8ba3-3b918ee6d685","html_url":"https://github.com/werthdavid/ngx-kjua","commit_stats":{"total_commits":111,"total_committers":9,"mean_commits":"12.333333333333334","dds":"0.32432432432432434","last_synced_commit":"7812b1c1f99ae791cd571bbf9422a10bef46f47c"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werthdavid%2Fngx-kjua","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werthdavid%2Fngx-kjua/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werthdavid%2Fngx-kjua/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werthdavid%2Fngx-kjua/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/werthdavid","download_url":"https://codeload.github.com/werthdavid/ngx-kjua/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036063,"owners_count":21037092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","kjua","qr-code","qr-generator","qrcode","qrcode-generator","qrcodes"],"created_at":"2024-08-03T02:01:02.540Z","updated_at":"2025-04-09T12:04:43.011Z","avatar_url":"https://github.com/werthdavid.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/werthdavid"],"categories":["Recently Updated","Third Party Components","UI Components"],"sub_categories":["[Dec 23, 2024](/content/2024/12/23/README.md)","QR Codes","QR Code"],"readme":"[![NPM version](https://img.shields.io/npm/v/ngx-kjua.svg?\u0026label=npm)](https://www.npmjs.com/package/ngx-kjua) \n[![Downloads](https://img.shields.io/npm/dm/ngx-kjua.svg)](https://npmjs.org/package/ngx-kjua)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com) \n\u003cimg align=\"right\" src=\"https://raw.githubusercontent.com/werthdavid/ngx-kjua/master/docs/readme-logo.png\"/\u003e\n\nIf you find my work useful you can buy me a coffee, I am very thankful for your support. \n\n\u003ca href=\"https://www.buymeacoffee.com/werthdavid\" target=\"_blank\"\u003e\u003cimg width=\"140\" src=\"https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\"\u003e\u003c/a\u003e\n\n\n# ngx-kjua\n\n\u003e Angular QR-Code generator component.\n\nThis is basically an Angular-wrapper for [kjua](https://github.com/lrsjng/kjua) by Lars Jung.\n\n## Breaking changes `v16.1.0`\nFromm the `v16.1.0` this library use the standalone component, and not the module anymore.  \n[See how to implement it](#installation)\n\n\n## Demo\n\n\u003cimg src=\"https://raw.githubusercontent.com/werthdavid/ngx-kjua/master/docs/demo.png\"/\u003e\n\n[Demo](https://werthdavid.github.io/ngx-kjua/index.html)\n\n[StackBlitz](https://stackblitz.com/edit/ngx-kjua-example-7) \n\n[StackBlitz](https://stackblitz.com/edit/ngx-kjua-helper?file=app/app.component.ts) Example for encoding Contacts, Calendar entries, WiFi-settings and more. You can use iPhone's default Camera App, it will decode QR-Codes!\n\n[StackBlitz](https://stackblitz.com/edit/ngx-kjua-batch?file=app/app.component.html) Example with 300 codes at once (async rendering)\n\n[StackBlitz](https://stackblitz.com/edit/ngx-kjua-batch-jspdf?file=app%2Fapp.component.ts) Example for generating a PDF with [jspdf](https://github.com/MrRio/jsPDF)\n\n## Installation\n\nTo install this package, run:\n\n```bash\nnpm i ngx-kjua --save\n```\n\nThen import it into your Angular `AppModule`:\n\n```typescript\n// Common imports\nimport { NgModule /* , ... */ } from '@angular/core';\n\n// Import the package's module\nimport { NgxKjuaComponent } from 'ngx-kjua';\n\n@NgModule({\n    declarations: [ /* AppComponent ... */ ],\n    imports: [\n    \n        // BrowserModule, \n        // ...\n        \n        NgxKjuaComponent,\n        \n        // other imports...\n    ],\n    // ...\n})\nexport class AppModule { }\n```\n\n## Usage\n\nOnce the package is imported, you can use it in your Angular application:\n\n### Basic\n\n```html\n  \u003cngx-kjua\n    [text]=\"'hello'\"\n  \u003e\u003c/ngx-kjua\u003e\n```\n\n### Advanced\n\n```html\n  \u003cngx-kjua\n    [text]=\"'hello'\"\n    [renderAsync]=\"false\"\n    [render]=\"'svg'\"\n    [crisp]=\"true\"\n    [minVersion]=\"1\"\n    [ecLevel]=\"'H'\"\n    [size]=\"400\"\n    [ratio]=\"undefined\"\n    [fill]=\"'#333'\"\n    [back]=\"'#fff'\"\n    [rounded]=\"100\"\n    [quiet]=\"1\"\n    [mode]=\"'plain'\"\n    [mSize]=\"30\"\n    [mPosX]=\"50\"\n    [mPosY]=\"50\"\n    [label]=\"'label text'\"\n    [fontname]=\"'sans-serif'\"\n    [fontcolor]=\"'#ff9818'\"\n    [image]=\"undefined\"\n    [cssClass]=\"'image-auto'\"\n  \u003e\u003c/ngx-kjua\u003e\n```\n\n## Options\n\n:exclamation: *Caution*: When adding images, label or similar, this will reduce the readability of the QR-code. Consider using a higher error correction level (e.g. L) in those cases.\n\n### Crisp\n\nAs you can set the size of the image, the amount of 'modules' (black/white boxes that make up the QR-code) is calculated based on the size and the amount of `quiet` modules. The calculation can result in an odd number so that a module is e.g. 4.5 pixels big. The resulting image will be drawn fuzzy if `crisp` is set to false. Setting it to `true` will result in 'sharp' lines.\n\n#### crisp false\n\u003cimg src=\"https://raw.githubusercontent.com/werthdavid/kjua/master/docs/no-crisp.jpg\"/\u003e\n\n#### crisp true\n\u003cimg src=\"https://raw.githubusercontent.com/werthdavid/kjua/master/docs/crisp.jpg\"/\u003e\n\n\n### Label\nKjua lets you embed a text or image to the code. This can be set with the setting `mode`.\nThis can reduce the readability of the code!\n\n### Image\n\u003cimg src=\"https://raw.githubusercontent.com/werthdavid/kjua/master/docs/image.png\"/\u003e\n\n### Image as Code\n\u003cimg src=\"https://raw.githubusercontent.com/werthdavid/kjua/master/docs/image-as-code.png\"/\u003e\n\n### Clear + Image\n\u003cimg src=\"https://raw.githubusercontent.com/werthdavid/ngx-kjua/master/docs/clearimage.png\"/\u003e\n\nThis mode let's you \"cut out\" parts of the QR-code and at the same time add an image.\n\n\n### labelimage, imagelabel and clearimage\nUse this, if you want a label AND an image. In these modes `mSize`, `mPosX` and `mPosY` can be provided as an array.\nIn mode `labelimage`, the first value (index 0) of the `mSize`, `mPosX` and `mPosY` arrays is used for the label,\nthe second value (index 1) is used for image and vice versa. Also in `labelimage` mode, the label is drawn before the \nimage is drawn and therefore kinda \"in the background\" if the two overlap.\n\n### All options\n\n* `text` encoded content (defaults to ``)\n* `render` render-mode: 'image', 'canvas', 'svg' (defaults to `image`)\n* `crisp` render pixel-perfect lines (defaults to `true`)\n* `minVersion` minimum version: 1..40 (defaults to `1`)\n* `ecLevel` error correction level: 'L', 'M', 'Q' or 'H' (defaults to `L`)\n* `size` size in pixel (defaults to `200`, min `24` or higher, depend on how much character you're using)\n* `fill` code color (defaults to `#333`)\n* `back` background color (defaults to `#fff`, for transparent use `''` or `null`)\n* `rounded` roundend corners in pc: 0..100 (defaults to `0`, not working if `render`is set to `svg`)\n* `quiet` quiet zone in modules (defaults to `0`)\n* `mode` modes: 'plain', 'label', 'image' or 'clear' (defaults to `plain`, set `label` or `image` property if you change this)\n* `mSize` label/image size in pc: 0..100 (defaults to `30`)\n* `mPosX` label/image pos x in pc: 0..100 (defaults to `50`)\n* `mPosY` label/image pos y in pc: 0..100 (defaults to `50`)\n* `label` additional label text (defaults to ``)\n* `fontname` font for additional label text (defaults to `sans-serif`)\n* `fontcolor` font-color for additional label text (defaults to `#333`)\n* `fontoutline` draw an outline on the label text in the color of the `back` (defaults to `true`)\n* `image` additional image (defaults to `undefined`, use an HTMLImageElement or base64-string)\n* `imageAsCode` draw the image as part of the code (defaults to `false`)\n* `renderAsync` weather or not rendering is done inside \"requestAnimationFrame\"-call (defaults to `false`, use true if you want to generate more than one code (e.g. batch))\n* `cssClass` additional css-class that will be appended to the div-container that contains the qr-code (defaults to `undefined`)\n\nMore details can be found on [larsjung.de/kjua](https://larsjung.de/kjua/)\n\n### Async rendering\n\nIf you plan to render more than one barcode (e.g. batch-generation) I recommend using `renderAsync`-flag. It executes the rendering inside a \"requestAnimationFrame\"-call.\n\n### Encoding Contacts, Calendar entries, WiFi-settings, ...\n\nThe component comes with a helper-class (`QrCodeHelper`), that helps you with generating Codes that have information like a Contact encoded.\nCurrently it supports the generation of:\n\n* SMS: number with optional pre-defined text\n* Call\n* Geo-Information: a point on the map with Latitude and Longitude\n* Events\n* Email: recipient with an optional subject and text\n* WiFi: SSID with optional password and a flag for hidden WiFis\n* Contact Information: name with optional address, telephone-number(s), email, url.\n\nContact Encoding is done with MECard-format and NOT VCard! VCard gives a longer string and therefore a\nbigger code which potentially has a negative impact on readability for scanners. \nYou can, of course, create a [VCard](https://en.wikipedia.org/wiki/VCard) string as well but the format is more complex.\n\n### Generate PDF\n\nSee the [example](https://stackblitz.com/edit/ngx-kjua-batch-jspdf?file=app%2Fapp.component.ts) above. \nIt works with pure kjua and has in fact nothing to do with ngx-kjua but I thought somebody might find it useful.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwerthdavid%2Fngx-kjua","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwerthdavid%2Fngx-kjua","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwerthdavid%2Fngx-kjua/lists"}