---
title: Save Barcode as PNG
slug: scan/save-barcode-as-png
description: Save generated barcodes as PNG images in Unaric Scan for use in documents, emails, or external systems.
image: https://archbee-image-uploads.s3.amazonaws.com/10Nod6Ww95R3dPr0k0TCJ/01JUY3ABPHNI5-KK2W7Cj_unaric-scan.png
icon: {"faIcon":"fa-solid fa-floppy-disk"}
docTags: 
createdAt: 2025-04-10T00:26:42.390Z
---

Save generated barcodes as PNG image attachments linked to the current record. These images can be used in email templates, Apex code, or other applications.

::Image[]{src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfAVHg3ogRD-EW3u4-D0ZlG1q9qDrwZBmHPhGCs10ef8rWEMDqF2F1LZvR7HEUmU_fFMiktwwSsgxmcJT4fsFmA2vvoxiGwcwNeo335vitMuUaavI46vTKKsB0GLQ8sMR7imH4fQw?key=HYlI928LDmoLR8_mJ77-mcEh" size="60" width="1347" height="568" darkWidth="1347" darkHeight="568" position="center" showCaption="false"}

## How it works

The component automatically saves the generated barcode as a PNG file whenever the code renders successfully on the page. The saved images are attached to the record and can be accessed from the **Files** related list.

### Key aspects

- The code must render correctly on the page to be saved.
- The image is generated client-side; there is no full backend generation.
- You can use the **scale** parameter in the component to adjust the size of the generated image. A higher scale value results in a larger image.
- By default, the component renders codes with a transparent background. However, when saving as PNG, the background is set to white to ensure the code displays correctly in various contexts, such as emails with different background colors.
- If you edit the field being encoded (e.g., change an email address), the component will rerender and save a new PNG file automatically.

### File naming convention

Saved files are named using the pattern `{code_type}:{text}.png`, where:

- `code_type` is the type of code (e.g., `qrcode`, `code128`).
- `text` is the value being encoded (e.g., a hardcoded text value, a field value, or the record ID).

## Enable functionality

This feature is disabled by default. To enable it, you must edit the Lightning Page in the Lightning App Builder and activate it using the corresponding checkbox.

1. Open the **Lightning App Builder** by navigating to **Setup** > **Lightning App Builder**.
2. Select the Lightning Page where the **code** component is placed.
3. In the page editor, locate the **code** component.
4. In the component's properties panel, check the **Save as PNG** box.

   ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd5mVlF2UUmN1dNYbQ-gf55q3WDl-cWg574qtZqWhoLrM84yI1Wm-RrwVd7iLMeUGZHnhlGmECvEOgIQAMPQuTTNi2n06ZjXlwF_yHA6E0F4qYYgaEJ-alwO3d3RHA2dPAaBOZ5jA?key=HYlI928LDmoLR8_mJ77-mcEh)
5. Click **Save** to apply the changes to the page. Once enabled, the component will save the generated code as a PNG attachment to the record each time the code renders successfully.