QR 代码样式

JavaScript库用于生成带有标志和样式的QR代码.

试试看 https://qr-code-styling.com (中文(简体) )

如果您有问题/建议/说明/问题,请开始讨论或联系我。 让我们一起创建一个很酷的图书馆.

实例

安装

npm install qr-code-styling

使用量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        type: "svg",
        data: "https://www.facebook.com/",
        image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
        dotsOptions: {
            color: "#4267b2",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });

    qrCode.append(document.getElementById("canvas"));
    qrCode.download({ name: "qr", extension: "svg" });
</script>
</body>
</html>

反应实例 (Codesandbox)

角实例( Codesandbox)

反应实例( 来源)

角实例( 来源)

Vue 实例( 来源)

API 文档

QRCodeStyling 实例

new QRCodeStyling(options) => QRCodeStyling

options 结构

options.qrOptions 结构

options.imageOptions 结构

当 QR 类型是 svg 时, 图像可能不会在某些应用程序中加载, 因为它被保存为 url , 一些 svg 应用程序不会出于安全原因渲染 url 图像 。 设置 saveAsBlob 到 true 将会将图像保存为 blob, 让它在更多地方正确渲染, 但也会增加文件大小 .

options.dotsOptions 结构

options.backgroundOptions 结构

options.cornersSquareOptions 结构

options.cornersDotOptions 结构

渐变结构

options.dotsOptions.gradient

options.backgroundOptions.gradient

options.cornersSquareOptions.gradient

options.cornersDotOptions.gradient

渐变颜色停止结构

options.dotsOptions.gradient.colorStops[]

options.backgroundOptions.gradient.colorStops[]

options.cornersSquareOptions.gradient.colorStops[]

options.cornersDotOptions.gradient.colorStops[]

QRCode 定型方法

QRCodeStyling.append(container) => void

QRCodeStyling.getRawData(extension) => Promise<Blob>

QRCodeStyling.update(options) => void

QRCodeStyling.download(downloadOptions) => Promise<void>

返回的承诺将解析入 QR 代码图像的数据 URI .

downloadOptions 结构

节点支持

您可以在节点服务器上通过节点- canvas 或 jsdom 对象使用此功能, 取决于您是否分别创建非 svg 或 svg 。 使用时必须同时通过 imageOptions.saveAsBlob。 。 。 .

通话 getRawData 在节点中,将返回一个缓冲器而不是一个 Blob.

const { QRCodeStyling } = require("qr-code-styling/lib/qr-code-styling.common.js");
const nodeCanvas = require("canvas");
const { JSDOM } = require("jsdom");
const fs = require("fs");

const options = {
    width: 300,
    height: 300,
    data: "https://www.facebook.com/",
    image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
    dotsOptions: {
        color: "#4267b2",
        type: "rounded"
    },
    backgroundOptions: {
        color: "#e9ebee",
    },
    imageOptions: {
        crossOrigin: "anonymous",
        margin: 20
    }
}

// For canvas type
const qrCodeImage = new QRCodeStyling({
    nodeCanvas, // this is required
    ...options
});

qrCodeImage.getRawData("png").then((buffer) => {
  fs.writeFileSync("test.png", buffer);
});

// For svg type
const qrCodeSvg = new QRCodeStyling({
    jsdom: JSDOM, // this is required
    type: "svg",
    ...options
});

qrCodeSvg.getRawData("svg").then((buffer) => {
  fs.writeFileSync("test.svg", buffer);
});

// For svg type with the inner-image saved as a blob
// (inner-image will render in more places but file will be larger)
const qrCodeSvgWithBlobImage = new QRCodeStyling({
    jsdom: JSDOM, // this is required
    nodeCanvas, // this is required
    type: "svg",
    ...options,
    imageOptions: {
        saveAsBlob: true,
        crossOrigin: "anonymous",
        margin: 20
    }
});

qrCodeSvgWithBlobImage.getRawData("svg").then((buffer) => {
  fs.writeFileSync("test_blob.svg", buffer);
});

许可证

MIT 许可证. 版权 (c) 2021 Denys Kozak