Generate barcodes in the Browser and read them from images or a camera
Generate and scan supported formats on the same page without sending input values, images, or Camera Frames externally.
Read barcode imagesConclusion: Read the original image before recompression and compare raw values and format with the source material
You can select, Drop, or paste PNG, JPEG, WebP, GIF, or BMP from the Clipboard; supported Browsers try BarcodeDetector and then the bundled ZXing.
When an image contains multiple barcodes, the native API may return multiple results, but the fallback or image conditions may yield only the first one, so batch detection is not guaranteed.
Check number validity, image generation, successful scanning, and compliance with business standards separately.
Check the image file and barcode area separately
First, check whether the image opens as a supported format; next, whether the entire barcode and left/right margins are included; and finally, whether the lines are distinct and have contrast.
HEIC and PDF files themselves are not handled directly as image input. If necessary, use image conversion or a screenshot to create PNG / JPEG, and save it without cropping out the barcode.
| Account to check | How to check | judgment |
|---|---|---|
| File | Extension and MIME | Supported images |
| Composition | Left/right margins and overall | No clipping |
| Result | Raw value / format | Original document match |
| Multiple | Count and position | Also check each item individually |
How to check using the barcode generation and reading tool
- Select, drop, or paste an image.
- Check the entire Barcode and margins in Preview.
- Check the format and Raw values of the analysis result.
- Copy the value and compare it with the original material or another reader.
Before uploading images containing confidential management or membership numbers to an external reader, check the handling conditions.
Isolating image reader issues
| Symptom | Initial check | Next steps |
|---|---|---|
| The image does not open | File format | Convert to PNG / JPEG |
| Do not detect | Spacing and line width | Try again with the original image |
| The values differ | Detected format | Compare with a different reader. |
| Miss multiple items | Placement and count | Crop one item at a time. |
Choose a barcode format based on the value's use and character set
| Format | Main input | How the current tool handles it |
|---|---|---|
| JAN-13 / EAN-13 | A 12-digit body value or a completed 13-digit value | Add a check digit for 12 digits; validate for 13 digits. |
| JAN-8 / EAN-8 | A 7-digit body value or a completed 8-digit value | Add for 7 digits; validate for 8 digits. |
| UPC-A | An 11-digit body value or a completed 12-digit value | Add for 11 digits; validate for 12 digits. |
| ITF-14 | A 13-digit body value or a completed 14-digit value | Add for 13 digits; validate for 14 digits. |
| Code 128 | Alphanumeric characters, symbols, and more | Flexibly represent management numbers and similar values. Also check the encoder specification for allowed input characters |
| Code 39 | Uppercase alphanumeric characters, space, .-$/+% | Convert lowercase to uppercase before generating |
| ITF | An even number of digits | Treat odd digit counts and non-digits as errors |
| Codabar / NW-7 | Numbers and some symbols; start and end characters A–D | Validate rules that include start and end characters |
Even for the same value, the bar-and-space pattern changes if the format differs. Check not only the raw value returned by the reader but also the detected format, and match the format accepted by the POS register, handheld scanner, and logistics system you use.
Do not confuse a check digit with the official identification number
JAN / EAN / UPC / ITF-14 numbers end with a check digit calculated from the preceding digits. DevelopTools calculates the final digit for body digits and verifies a match for complete digits. This mechanism finds input errors; it does not prove that a number has been officially assigned to a product.
- GTIN-13 (standard JAN type) consists of a 12-digit body value and a 1-digit check digit
- GTIN-8 (short JAN type) consists of a 7-digit body value and a 1-digit check digit
- GTINs used for product distribution must follow GS1 company prefix and product information registration rules
- Generating an image from arbitrary numbers does not acquire or register an official JAN code.
Check Quiet Zone, line width, height, and Contrast in the final medium.
For one-dimensional barcodes, establish reading conditions including unprinted quiet zones on both sides, the X-dimension that is the width of the narrowest bar or space, bar height, and contrast with the background. They may be readable on screen but fail after scaling, image interpolation, print bleeding, gloss, folds, or low resolution.
| confirmation | States likely to fail | Recommended Action |
|---|---|---|
| Quiet Zone | There are characters, borders, or images immediately before the bars. | Regenerate and reposition while retaining left and right whitespace |
| line width | Thin lines collapse when reduced or scaled at non-integer ratios | Generate at the target size without changing the aspect ratio. |
| Contrast | Thin bars, dark backgrounds, and multicolored bars | Prioritize dark solid bars and a light solid background |
| Image quality | JPEG recompression, blur, reflection, low resolution | Recreate it from the original PNG / SVG and test with the actual item |
| printing | Unintentional scaling with Fit to page | Measure the actual dimensions and verify with the scanner that will be used |
Validate from generation through actual use with a round trip
- Confirm the input value and format, then check the displayed value and check digit after generation.
- Save PNG and SVG, then return them to the tool's image Reader to compare Raw values and formats.
- Read again after actual steps such as rotation, scaling, screenshots, and printing
- Do not stop with self-testing using the same library; also check with the planned scanners and devices.
- When scanning fails, isolate format, digit count, quiet zone, line width, contrast, and image quality one item at a time.
Generating with the same browser and reading it with that same browser is a useful regression test, but it does not guarantee compatibility including store scanners, logistics scanners, printers, and paper quality. For business use, make validation with the target device and physical label a completion criterion.
Process input values, images, and camera video in the browser.
The current tool runs bundled libraries in the browser and does not send generated values, read images, camera frames, or decoded raw values to the DevelopTools server or third-party APIs. It releases object URLs created during image selection after use and stops MediaStream tracks when the camera stops.
- Do not automatically send Raw values to the product search API.
- Request camera permission only after the user presses the start button
- Even when measuring scan-success events, do not include raw values or the image itself in analytics.
- Barcodes are not encryption, so do not encode and publish secret information
What the current tool can generate and read
| Function | Support in the current Tool |
|---|---|
| Generation format | Code 128, Code 39, JAN-13 / EAN-13, JAN-8 / EAN-8, UPC-A, ITF, ITF-14, Codabar / NW-7 |
| Generation settings | Horizontal scale, height, left and right quiet zones, human-readable text display, bar color, and background color |
| Generated result | Display confirmed values, check digits, and formats; save as PNG or SVG |
| Image input | Select, drop, or paste PNG, JPEG, WebP, GIF, or BMP from the Clipboard. |
| Scanning process | On supported browsers, try BarcodeDetector first; if detection fails, fall back to the bundled ZXing |
| Camera | After an explicit action, start with preference for the rear camera, and release the MediaStream when stopped. |
| Unsupported | Generation of UPC-E, GS1-128, GS1 DataBar, and DataMatrix; product Database search; professional Barcode quality verification |
The image reader displays the detected format and raw value. However, formats returned by BarcodeDetector vary by browser, and the bundled ZXing image fallback generally handles only the first detected result. It does not promise batch detection of multiple codes or equal reading accuracy for every standard.
Check standards and Web APIs using primary sources
- GS1 Japan: Introduction to barcodes
- GS1 Japan: How to calculate check digits
- GS1：GS1 Application Identifiers
- GS1: GS1-128 format
- MDN：BarcodeDetector
- MDN：MediaDevices.getUserMedia()
- Official bwip-js repository
- Official ZXing for JS Browser Repository
- Official JsBarcode repository
For official GTIN settings and barcode dimensions, prioritize GS1 / GS1 Japan; for browser support, use actual BarcodeDetector.getSupportedFormats() and compatibility tables; for camera permission, use the getUserMedia specification; and for library APIs, use the official documentation for the version in use. DevelopTools uses bwip-js as its generation library; do not confuse JsBarcode article examples with the current implementation.
Example: Read a management number from a report screenshot
Save a screenshot while the whitespace on both sides of the barcode remains, then drop it into the reader.
Check the detected format and raw value, and compare them with the human-readable text printed on the report.
- Save original image
- Drop
- Format and value verification
- Compare with the printed value
Resizing Screenshots again or resaving them on social media blurs thin lines, so use the original image when possible.
Frequently asked questions
- Can a JAN code be created from any numbers you like?
- Image generation alone can draw numbers with valid digit counts and check digits, but it does not make them GTINs that can be formally used for commercial products. Check GS1 company prefix and product information setup and registration rules.
- If it can be read on screen, will it always be readable after printing?
- Cannot guarantee. Print Size, Quiet Zone, minimum line width, bleeding, paper/Label reflectivity, and Scanner performance vary, so check with full-size printouts and the intended device.
- Can the product name also be identified from the scan result?
- The current Tool retrieves only the Raw value encoded in the barcode and the detected format. It does not connect to external product Databases that retrieve product names or prices.