**[ This description is mirrored from README.md at [github.com/LostInBrittany/granite-qrcode-decoder](https://github.com//LostInBrittany/granite-qrcode-decoder/blob/2.0.1/README.md) on 2019-05-22 ]** [](https://vaadin.com/directory/component/LostInBrittanygranite-qrcode-decoder) [](https://vaadin.com/directory/component/LostInBrittanygranite-qrcode-decoder) [](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 > > Built on [lit-element](https://github.com/Polymer/lit-element) > > The old Polymer 2.x-1.x version is available on the [`polymer-hybrid` branch](https://github.com/LostInBrittany/granite-qrcode-decoder/tree/polymer-hybrid). ## 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 ```html ``` ## Install Install the component using [npm](https://www.npmjs.com/): ```sh $ npm i @granite-elements//granite-qrcode-decoder ``` Once installed, import it in your application: import '@granite-elements/granite-qrcode-decoder/granite-qrcode-decoder.js'; ## Running demos and tests in browser 1. Fork the `granite-qrcode-decoder` repository and clone it locally. 1. Make sure you have [npm](https://www.npmjs.com/) and the [Polymer CLI](https://www.polymer-project.org/3.0/docs/tools/polymer-cli) installed. 1. When in the `granite-qrcode-decoder` directory, run `npm install` to install dependencies. 1. Serve the project using Polyumer CLI: `polymer serve --npm` 1. Open the demo in the browser - http://127.0.0.1:8080/components/@greanite-elements/granite-qrcode-decoder/demo ## 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)