@wtechtec/qr-generator-core
Advanced tools
A powerful QR code generator with customizable styling options
QR Generator Core 是一个功能强大的二维码生成库，支持自定义位置、尺寸、背景图片、文本、HTML模块等高级功能。基于 html2canvas 和 qr-code-styling 构建，提供高质量的二维码生成和导出能力。
npm install @wtechtec/qr-generator-core
import { createQRGenerator, generateQRAsPNG } from '@wtechtec/qr-generator-core';
// 基础配置
const config = {
text: "https://example.com",
width: 400,
height: 300,
qrPosition: { x: 100, y: 75 },
qrSize: { width: 200, height: 150 }
};
// 创建生成器
const generator = createQRGenerator(config);
// 渲染并导出
const blob = await generator.exportAsPNG();
// 快速生成并导出 PNG
const blob = await generateQRAsPNG(config);
// 快速生成并下载
await generateAndDownloadQR(config, 'my-qr-code.png');
// 快速生成 DataURL
const dataURL = await generateQRAsDataURL(config);
interface QRGeneratorConfig {
// 基础配置
text: string; // 二维码内容
width: number; // 画布宽度
height: number; // 画布高度
// 二维码位置和尺寸
qrPosition: { x: number; y: number }; // 二维码位置
qrSize: { width: number; height: number }; // 二维码尺寸
// QR码样式配置
qrOptions: {
typeNumber: number;
mode: 'Numeric' | 'Alphanumeric' | 'Byte' | 'Kanji';
errorCorrectionLevel: 'L' | 'M' | 'Q' | 'H';
};
// 图像配置
imageOptions: {
hideBackgroundDots: boolean;
imageSize: number;
margin: number;
crossOrigin: string;
};
// 点样式
dotsOptions: {
color: string;
type: 'rounded' | 'dots' | 'classy' | 'classy-rounded' | 'square' | 'extra-rounded';
gradient?: GradientConfig;
};
// 背景样式
backgroundOptions: {
color: string;
gradient?: GradientConfig;
};
// 角落样式
cornersSquareOptions: {
color: string;
type: 'dot' | 'square' | 'extra-rounded';
gradient?: GradientConfig;
};
cornersDotOptions: {
color: string;
type: 'dot' | 'square';
gradient?: GradientConfig;
};
// Logo配置
logo?: {
src: string;
size: number;
position?: { x: number; y: number };
};
// 导出配置
exportOptions: {
format: 'png' | 'jpeg' | 'svg';
quality: number;
borderRadius: number;
};
// 背景图片数组
backgrounds?: BackgroundConfig[];
// 文本数组
texts?: TextConfig[];
// HTML模块数组
htmlModules?: HtmlModuleConfig[];
}
interface BackgroundConfig {
src: string; // 图片URL或base64
position: { x: number; y: number }; // 位置坐标
size: { width: number; height: number }; // 图片尺寸
mode: 'fill' | 'contain' | 'cover' | 'stretch'; // 填充模式
zIndex: number; // 层级
opacity: number; // 透明度 (0-1)
}
interface TextConfig {
content: string; // 文本内容
position: { x: number; y: number }; // 位置坐标
fontSize: number; // 字体大小
color: string; // 文本颜色
fontFamily: string; // 字体族
fontWeight: number; // 字体粗细
zIndex: number; // 层级
opacity: number; // 透明度
textAlign?: 'left' | 'center' | 'right'; // 文本对齐
lineHeight?: number; // 行高
}
interface GradientConfig {
type: 'linear' | 'radial'; // 渐变类型
rotation: number; // 旋转角度
colorStops: Array<{ // 颜色停止点
offset: number; // 位置 (0-1)
color: string; // 颜色
}>;
}
主要的二维码生成器类，提供完整的生成和导出功能。
const generator = new QRGenerator(config: Partial<QRGeneratorConfig>);
// 渲染画布
await generator.render(): Promise<HTMLDivElement>
// 导出为PNG Blob
await generator.exportAsPNG(options?: ExportOptions): Promise<Blob>
// 导出为DataURL
await generator.exportAsDataURL(options?: ExportOptions): Promise<string>
// 下载PNG文件
await generator.downloadAsPNG(filename?: string, options?: ExportOptions): Promise<void>
// 更新配置
generator.updateConfig(newConfig: Partial<QRGeneratorConfig>): void
// 获取当前配置
generator.getConfig(): QRGeneratorConfig
// 验证配置
generator.validateConfig(): { isValid: boolean; errors: string[] }
// 清理资源
generator.cleanup(): void
// 销毁实例
generator.destroy(): void
interface ExportOptions {
scale?: number; // 缩放比例 (默认: 2)
quality?: number; // 质量 (0-1, 默认: 0.9)
useCORS?: boolean; // 是否使用CORS (默认: true)
allowTaint?: boolean; // 是否允许跨域 (默认: true)
}
自动计算二维码的默认位置和尺寸：
const settings = calculateDefaultQRSettings(
canvasWidth: number,
canvasHeight: number,
qrRatio: number = 0.6
);
// 返回
{
qrPosition: { x: number; y: number };
qrSize: { width: number; height: number };
}
const basicConfig = {
text: "https://example.com",
width: 400,
height: 300,
qrPosition: { x: 100, y: 75 },
qrSize: { width: 200, height: 150 }
};
const generator = createQRGenerator(basicConfig);
const blob = await generator.exportAsPNG();
const configWithBackground = {
text: "https://example.com",
width: 500,
height: 400,
qrPosition: { x: 150, y: 125 },
qrSize: { width: 200, height: 150 },
backgrounds: [
{
src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...",
position: { x: 0, y: 0 },
size: { width: 500, height: 400 },
mode: 'cover',
zIndex: 1,
opacity: 0.8
}
]
};
const complexConfig = {
text: "https://github.com/project",
width: 600,
height: 500,
qrPosition: { x: 200, y: 175 },
qrSize: { width: 200, height: 150 },
backgrounds: [
{
src: backgroundImage1,
position: { x: 0, y: 0 },
size: { width: 600, height: 500 },
mode: 'cover',
zIndex: 1,
opacity: 0.6
},
{
src: backgroundImage2,
position: { x: 50, y: 50 },
size: { width: 200, height: 200 },
mode: 'contain',
zIndex: 2,
opacity: 0.8
}
],
texts: [
{
content: "扫码访问项目",
position: { x: 50, y: 30 },
fontSize: 24,
color: "#333333",
fontFamily: "Arial",
fontWeight: 600,
zIndex: 10,
opacity: 1,
textAlign: "left"
}
]
};
const gradientConfig = {
text: "https://example.com",
width: 400,
height: 400,
qrPosition: { x: 100, y: 100 },
qrSize: { width: 200, height: 200 },
backgroundOptions: {
color: "#ffffff",
gradient: {
type: "linear",
rotation: 45,
colorStops: [
{ offset: 0, color: "#ff9a9e" },
{ offset: 1, color: "#fecfef" }
]
}
},
dotsOptions: {
color: "#333333",
type: "classy-rounded"
}
};
const customPositionConfig = {
text: "https://example.com",
width: 600,
height: 400,
qrPosition: { x: 50, y: 50 }, // 左上角
qrSize: { width: 180, height: 180 },
texts: [
{
content: "主要内容区域",
position: { x: 250, y: 80 },
fontSize: 24,
color: "#333333",
fontFamily: "Arial",
fontWeight: 600,
zIndex: 10,
opacity: 1,
textAlign: "left"
}
]
};
库提供完整的配置验证功能：
const generator = createQRGenerator(config);
const validation = generator.validateConfig();
if (!validation.isValid) {
console.error('配置错误:', validation.errors);
// 处理错误
} else {
// 配置有效，继续处理
await generator.render();
}
destroy() 方法清理资源try {
const generator = createQRGenerator(config);
const blob = await generator.exportAsPNG();
// 处理成功结果
} catch (error) {
console.error('生成失败:', error);
// 处理错误
} finally {
generator?.destroy(); // 清理资源
}
destroy() 清理资源awaitMIT License
如果这个项目对你有帮助，请给一个 ⭐️ Star！
Made with ❤️ by wtechtec
FAQs
A powerful QR code generator with customizable styling options
We found that @wtechtec/qr-generator-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.