Професійний генератор QR-кодів

Генеруйте QR-коди локально в браузері. Підтримує стилі (форми/позиційні точки), градієнти, логотипи, рамки та можливість поділитися. Дані не надсилаються на сервер, завжди безкоштовно та без водяного знаку.

Завжди безкоштовно Без водяного знаку Локальна генерація PNG / SVG

Генератор QR-кодів

Швидкі пресети стилів Застосувати одним клік, потім можна трохи відрегулювати в налаштуваннях стилю
Налаштування стилю
Рамка
Розширені налаштування
Градієнт
Логотип
Підтримуються лише в режимі PNG. Зображення обробляються локально і не будуть відправлені на сервер.
logo preview
Підказка: стилі працюють лише для полотна PNG. Своєрідне відображення SVG скоро з'явиться.
Попередній перегляд
Після введення або зміни вмісту та стилів автоматично відобразиться попередній перегляд.

Завантажені зображення не містять жодного водяного знаку, а інструмент можна використовувати вільно назавжди.

Як користуватися

  • Оберіть тип (URL, текст, WiFi, vCard, SMS, електронна пошта), введіть або вставте вміст
  • Регулюйте розмір, відступ, кольори, рівень корекції помилок, а також стилі (форми/позиційні точки), градієнти, логотипи, рамки тощо
  • Оберіть формат PNG або SVG
  • QR-код буде автоматично згенерований; після готовності ви можете “завантажити” або “скопіювати” його
  • При використанні логотипу або складних стилів рекомендується підвищити рівень корекції помилок до H та залишити достатньо затишної зони (порожніх відступів)
  • Для друку/демонстрації переконайтеся, що у переднього та заднього плану високий контраст, уникайте надто малих розмірів та надмірного спотворення

Особливості

  • Генерація на чистому фронтенді (без відправки даних на сервер)
  • Підтримка виводу у форматі PNG та SVG
  • Можливість налаштування стилів: форми, позиційні точки, закруглені кути, проміжки
  • Градієнти (багатоколірні, багатонаправлені)
  • Додавання логотипу (з можливістю автоматичного підвищення рівня корекції помилок)
  • Рамки та обведення (стиль закруглених карток)
  • Можливість поділитися та копіювання в буфер обміну (посилання/зображення)
  • Підтримка кількох мов та тем

Що таке маркери позиціонування (Finder)?

Три великі квадрати в кутах QR-коду називаються маркерами позиціонування (Finder), які допомагають камері швидко знайти положення та кут QR-коду, що дозволяє виправити відхилення та розшифрувати його. Вони зазвичай мають чорно-білий 7×7 модульну структуру (зовні - чорний, всередині - білий, в центрі - чорний).

  • Роль: швидке позиціонування, стійкість до обертання та перспективних перетворень.
  • Стиль: Цей інструмент підтримує рендеринг маркерів позиціонування у формі квадратів, з закругленими кутами та в "крапковому стилі" (виберіть у розділі "Стиль → Finder").

Хто винайшов QR-код?

QR-код (QR Code) був винайдений японським інженером Масаіро Хара (Masahiro Hara) з компанії Denso Wave у 1994 році. QR - це скорочення від "Quick Response" (швидка реакція).

  • Мотивація винайдення: покращити ефективність ідентифікації на виробничому конвеєрі автомобільних деталей, подолати обмеження одновимірних кодів щодо обсягу та швидкості читання.
  • Інспірація для дизайну: Чорно - білі камені у гої та матричні малюнки дали змогу створити високо стійкий дизайн на основі "модульності + позиційних графіків".
  • Чому не потрібно платити патентні збори: Компанія Denso Wave володіє торговою маркою та частиною патентів, але чітко оголосила, що дозволяє вільне використання, щоб сприяти поширенню цього стандарту (підтримує комерційне використання без ліцензійних зборів).

Стандартні норми та поради щодо використання

  • Міжнародний стандарт: ISO/IEC 18004 (Специфікація двовимірного QR-коду), який визначає версію, маски, рівень корекції помилок, графічну структуру та інші параметри.
  • Рівень容错: Чотири рівні L/M/Q/H (близько 7%/15%/25%/30% даних можна відновити). При накладанні логотипу рекомендується використовувати вищий рівень.
  • Кодовані дані: Текст, URL, vCard, Wi - Fi тощо. Рекомендується дотриматися відповідних URI/форматів даних (наприклад, WIFI:T:WPA;S:SSID;P:PASS;;).
  • Друк та відображення: Переконайтеся, що є контраст між переднім та заднім фоном та врахуйте розмір тихої зони; уникайте надмірного спотворення, надто малих розмірів та щільного текстури.
  • Accessibility: In critical situations, it is recommended to provide alternative text/links to avoid using the QR code as the only entry.

Генерація QR-коду за допомогою мов програмування

Нижче наведено найпростіші приклади для поширених мов, які підходять для навчання та створення шаблонів:

JavaScript(Node/Browser)
// Node: npm i qrcode
const QRCode = require('qrcode');
QRCode.toFile('qrcode.png', 'https://example.com', { errorCorrectionLevel: 'M' });

// Browser (Canvas):
// <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/browser.min.js"></script>
QRCode.toCanvas(document.getElementById('canvas'), 'Hello QR', { width: 256 });
Python
# pip install qrcode[pil]
import qrcode
img = qrcode.make('https://example.com')
img.save('qrcode.png')
PHP
// composer require endroid/qr-code
use Endroid\QrCode\QrCode;
use Endroid\QrCode\Writer\PngWriter;

$qr = QrCode::create('https://example.com');
$writer = new PngWriter();
$result = $writer->write($qr);
$result->saveToFile(__DIR__.'/qrcode.png');
Go
// go get -u github.com/skip2/go-qrcode
package main

import "github.com/skip2/go-qrcode"

func main() {
    qrcode.WriteFile("https://example.com", qrcode.Medium, 256, "qrcode.png")
}
Java
// Maven: com.google.zxing:core, com.google.zxing:javase
// Minimal ZXing example
import com.google.zxing.BarcodeFormat;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.QRCodeWriter;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;

public class Main {
  public static void main(String[] args) throws Exception {
    QRCodeWriter writer = new QRCodeWriter();
    BitMatrix matrix = writer.encode("https://example.com", BarcodeFormat.QR_CODE, 256, 256);
    BufferedImage image = MatrixToImageWriter.toBufferedImage(matrix);
    ImageIO.write(image, "png", new File("qrcode.png"));
  }
}
Rust
// Cargo.toml
// qrcode = "0.13" 
// image = "0.24"

use qrcode::QrCode;
use image::Luma;

fn main() {
    let code = QrCode::new("https://example.com").unwrap();
    let image = code.render<Luma<u8>>().min_dimensions(256, 256).build();
    image.save("qrcode.png").unwrap();
}

Підказка: Можливості стилізації різних бібліотек сильно відрізняються. Якщо вам потрібні розширені стилі (крапки, градієнти, стилі маркерів позиціонування, рамки тощо), ви можете згенерувати PNG/SVG у цьому інструменті та використати їх безпосередньо.