chromium-style-qrcode-generator-with-wasm - GitLite

KO | EN

gitlite — search

#javascript #react #ai #typescript #go #golang #android #deep-learning #linux #macos #pytorch #security #mcp #openai

chromium-style-qrcode-generator-with-wasm

(★ 107)

A Chromium Style QR Code Generator using Rust and WebAssembly

파일 탐색기

최종 버전 다운로드 (.zip)

- - deploy-to-github-pages.yml
  - preview-build.yml
  - preview-deploy.yml
  - preview-start.yml
- favicon.ico
- app.css
- app.js
- lib.rs
.editorconfig
.gitignore
Cargo.lock
Cargo.toml
index.html
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
README.zh-CN.md
vite.config.js
vite.constant.js
vite.helper.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/liuliangsir/chromium-style-qrcode-generator-with-wasm

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd chromium-style-qrcode-generator-with-wasm

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

pnpm build:wasm

이 명령어를 터미널에 그대로 입력해 실행하세요.

pnpm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

pnpm dev

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

3. Rust

보통

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Rust (rustup) rustup으로 설치하면 cargo도 함께 설치됩니다.

├── Cargo.toml # Rust project configuration

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ cargo build가 에러 없이 끝나면 성공입니다. target/ 폴더에 실행 파일이 생성됩니다.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Chromium Style QR Code Generator (WebAssembly Version)

This is a high-performance QR code generator developed with Rust and WebAssembly technology. The project combines the efficiency of Rust with the cross-platform capabilities of WebAssembly to provide fast and efficient QR code generation for web applications.

## Features

- ⚡️ **High Performance**: Utilizing Rust and WebAssembly for high-speed QR code generation
- 🔄 **Real-time Preview**: Instantly updates QR codes as input changes
- 📋 **Smart Copy Function**: Copies QR code images directly to clipboard (with text fallback)
- 💾 **Perfect Downloads**: Downloads QR codes as crisp 450×450 pixel PNG images
- 🦖 **Chromium-Style Dino**: Supports dinosaur center images with white backgrounds
- 📱 **Responsive Design**: Adapts to different device screen sizes
- ✨ **High DPI Support**: Crystal clear rendering on retina and high-DPI displays
- 🎯 **Chromium Compliance**: Pixel-perfect implementation matching Chrome's QR generator

## Quality Improvements

### Technical Specifications

- **Module Style**: Circular dots (`ModuleStyle::kCircles`) matching Chrome
- **Locator Style**: Rounded corners (`LocatorStyle::kRounded`) matching Chrome
- **Center Image**: Dino with exact pixel data from Chromium source code
- **Canvas Size**: 240×240 pixels (`GetQRCodeImageSize()` equivalent)
- **Module Size**: 10 pixels per module (`kModuleSizePixels`)
- **Dino Scale**: 4 pixels per dino pixel (`kDinoTileSizePixels`)

## Technology Stack

- **Rust**: Core QR code generation logic
- **WebAssembly**: Compiles Rust into a format that can run in browsers
- **JavaScript**: Front-end interaction and rendering
- **HTML5/CSS**: User interface

## Installation and Usage

### Prerequisites

- [Rust](https://www.rust-lang.org/tools/install)
- [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/)
- [Node.js](https://nodejs.org/) (pnpm package manager recommended)

### Build Steps

1. Clone the repository

```bash
   git clone https://github.com/liuliangsir/chromium-style-qrcode-generator-with-wasm.git
   cd chromium-style-qrcode-generator-with-wasm
   ```

2. Build the WebAssembly module

```bash
   pnpm build:wasm
   ```

3. Install frontend dependencies

```bash
   pnpm install
   ```

4. Start the development server

```bash
   pnpm dev
   ```

5. Open the project in your browser (default: <http://localhost:5173>)

### How to Use

1. Enter any text, URL, or data in the input field (up to 2000 characters)
2. The QR code will be automatically generated and displayed with real-time updates
3. Use the "Copy" button to copy the QR code image directly to clipboard
4. Use the "Download" button to save the QR code as a crisp 450×450 PNG image

## Project Structure

```text
├── src/              # Source code directory
│   ├── lib.rs        # Rust WebAssembly module core code
│   ├── app.js        # Frontend JavaScript logic
│   └── app.css       # Stylesheet
├── public/           # Static resources
├── index.html        # Main HTML page
├── Cargo.toml        # Rust project configuration
└── package.json      # JavaScript project configuration
```

## How It Works

This QR code generator uses Rust's `qr_code` library to generate QR code data and exposes it to JavaScript via WebAssembly. The generation process includes:

1. Receiving text data input from users
2. Generating the corresponding QR code two-dimensional matrix in Rust
3. Adding appropriate quiet zones
4. Returning the two-dimensional matrix data to JavaScript
5. Rendering the QR code image using the Canvas API

## Development

### Modifying Rust Code

If you modify `lib.rs` or other Rust code, you need to rebuild the WebAssembly module:

```bash
pnpm build:wasm
```

### Modifying Frontend Code

Frontend code modifications will automatically reload.

## License

[MIT](LICENSE)

## Contribution

Issues and PRs are welcome! Please ensure your code adheres to the project's coding style.