# @cromwellian/granite-qrcode-decoder

> an element to decode a QR Code from an image

Latest version **1.0.2** (published 2018-09-30) · 0 weekly downloads

## Install

```sh
npm install @cromwellian/granite-qrcode-decoder
pnpm add @cromwellian/granite-qrcode-decoder
yarn add @cromwellian/granite-qrcode-decoder
bun add @cromwellian/granite-qrcode-decoder
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-09-30 |
| First published | 2018-09-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 26.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | cromwellian |

## Links

- npm: https://www.npmjs.com/package/@cromwellian/granite-qrcode-decoder
- Repository: https://github.com/cromwellian/granite-qrcode-decoder
- Homepage: https://github.com/cromwellian/granite-qrcode-decoder#readme
- Issues: https://github.com/cromwellian/granite-qrcode-decoder/issues
- npm.io page: https://npm.io/package/@cromwellian/granite-qrcode-decoder

## Dependencies (2)

- [@polymer/polymer](https://npm.io/package/@polymer/polymer.md) ^3.0.0
- [@granite-elements/granite-js-dependencies-grabber](https://npm.io/package/@granite-elements/granite-js-dependencies-grabber.md) ^2.0.3

## Recent versions

- 1.0.2 (latest) — 2018-09-30
- 1.0.1 — 2018-09-30
- 1.0.0 — 2018-09-30

## README

[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/LostInBrittanygranite-qrcode-decoder)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/LostInBrittanygranite-qrcode-decoder.svg)](https://vaadin.com/directory/component/LostInBrittanygranite-qrcode-decoder)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/LostInBrittany/granite-qrcode-decoder)

# granite-qrcode-decoder

> An element to decode a QR Code from an image. 
> using [a modified version](https://github.com/LostInBrittany/jsqrcode) of [Lazersoft's jsqrcode](https://github.com/LazerSoft/jsqrcode) library, to allow `jsqrcode` to deal with ShadowDOM
>
> Polymer 2.x element


## Doc & demo

The element can decode several sources of images:

- A dataURL, by using the `dataUrl` property
- An [`app-media-image-capture`](https://github.com/PolymerElements/app-media/elements/app-media-image-capture), by injecting it to the `blob` property
- A canvas, by calling the `decodeCanvas` method passing the canvas as parameter

[https://lostinbrittany.github.io/granite-qrcode-decoder](https://lostinbrittany.github.io/granite-qrcode-decoder)


## Usage example

<!--
```
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="granite-qrcode-decoder.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
    <granite-qrcode-decoder
        last-decoded-data="{{data}}"
        data-url="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAAFyAQMAAADS6sNKAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABn0lEQVR4nO2aS46EMAxELXEAjsTVcyQO0FJ6sF0xBBazmlGhqoW7SV6ywYk/3WaSJEmSJP2Peupjtu3H42GaLd1sxVwTz8vHw/qxAFpRPlaIeE5+zTl3ijDTmPg38Lb9fCkj/m28DeOLTPwreP9YM17DLL+4/8Uz8Cm/xSeDOfG8/GXlNWg/UuK5eAA9Uu2soo7z7jWW4dCLJ+Uj7dozcjtfE1FDN/G8/EmneA1HiWxNPDOPVMy8y+Vjno9ZGjPxzDxqp2Z+toHmRsuD/4jn4ROAF/RRTw1HEU/M+1w0uFwRpZGK4eSLZ+UvpxzHf8Tr2M3EE/Nr3ufoYjq/ZHn1cJ+LZ+LrjdfKdAUY8cR8NTCnUgqucPcf8UR8lVJxlfse2e86NN/n4rn4fOPV5fKVg282STwXf14ZrepLenbrd4nn4nGuP8MzvJTqHY3s+f4Xz8XHw+h3HaosTDw/f3n36ILAUVptKZ6bv/9LKwO5+FfwMbwhXlvk4A+/L4un4v0jvKAPqtCn/qd4Hj6FAO3Ltx2L7v0T8VS8JEmSJEl/qS/3CycsizQPTAAAAABJRU5ErkJggg==" 
        debug></granite-qrcode-decoder>
    Decoded QR code: [[data]]
```


## Install

Install the component using [Bower](http://bower.io/):

```sh
$ bower install LostInBrittany/granite-qrcode-decoder --save
```

Or [download as ZIP](https://github.com/LostInBrittany/granite-qrcode-decoder/archive/gh-pages.zip).## Usage

1. Import Web Components' polyfill (if needed):

    ```html
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    ```

2. Import Custom Element:

    ```html
    <link rel="import" href="bower_components/granite-qrcode-scanner/granite-qrcode-decoder.html">
    ```

3. Start using it!

    ```html
    <granite-qrcode-decoder>
    </granite-qrcode-decoder>
    ```


## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## License

[MIT License](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/@cromwellian/granite-qrcode-decoder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._