Files
Eric Tuvesson 53f0d6320e Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
2023-09-05 12:08:55 +02:00

24 lines
1.8 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: Scanning for QR Codes in uploaded images
hide_title: true
---
# Scanning for QR Codes in uploaded images
This example enables you to scan uploaded images for Quick Response (QR) Codes and fetch the resulting data in the QR Code. To scan for QR Codes via a camera feed, see the documentation on the [Camera QR Scanner](/library/modules/qr-scanner/guides/camera-feed).
**The Image QR Scanner** node works in conjunction with the **Open File Picker** node, which is used to upload an image that will be scanned for QR Codes. You can read more about the **File Picker** node [here](/nodes/utilities/open-file-picker). In the image below you can see how such a node tree might look.
## A simple example setup
In the example below, we use a [Button Node](/nodes/ui-controls/button) to open the **File Picker**. Once a file has been successfully uploaded and sent to the QR Node, the <span className="ndl-data">Scan Result</span> is returned to the [Text Node](/nodes/basic-elements/text) where the data contained in the QR Code will be displayed.
import ImportButton from '/src/components/importbutton'
import useBaseUrl from '@docusaurus/useBaseUrl'
<div className="ndl-image-with-background l">
<img src={useBaseUrl("/library/modules/qr-scanner/guides/image-upload/qr-image-upload.png")} className="ndl-image large"></img>
<ImportButton zip="/library/modules/qr-scanner/guides/image-upload/qr-image-upload.zip" name="Uploaded File QR Scanner" thumb="/library/modules/qr-scanner/qr_noodlnet.png"/>
</div>
Note that In this particular example, no text will be shown if QR Code cant be found or read from the uploaded image. You can use the <span className="ndl-signal">Scan Success/Scan Failed</span> signals of the **Image QR Scanner** node to include error handling, but this is not shown in this simple setup.