找到了一个不错的二维码生成库,这个生成库可以自定义一些属性去生成想要的样式的二维码,我这里生成一个类似于企业微信二维码的样式的二维码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="easy.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    
    <!--二维码容器-->
    <div id="qrcode"></div>
    
    <!--调用-->
    <script type="text/javascript">
    
        var options = {
            text: "https://segmentfault.com/", // 内容
            colorDark : "#000000", // 暗色
            colorLight : "#ffffff", // 亮色
            correctLevel : QRCode.CorrectLevel.H, // 容错等级
            dotScale: 0.6, // 信息点缩放比例
            dotScaleTiming: 0.6, // 信息点缩放比例
            dotScaleTiming_H: 0.6, // 信息点缩放比例
            dotScaleTiming_V: 0.6, // 信息点缩放比例
            dotScaleA: 0.6, // 信息点缩放比例
            dotScaleAO: 0.6, // 信息点缩放比例
            dotScaleAI: 0.6, // 信息点缩放比例
            logo: "logo.png", // logo
            logoWidth: 50, // logo宽度
            logoHeight: 50, // logo高度
        };
        new QRCode(document.getElementById("qrcode"), options);
        
    </script>
</body>
</html>

开源地址:https://github.com/ushelp/EasyQRCodeJS
使用示例:https://www.easyproject.cn/easyqrcodejs/tryit.html

企业微信二维码样式的特点

特点就是信息点比较小,比较密集,通过控制 Dot Scale 的值就可以让信息点变得很小、很密集,这个值叫做缩放比例。

image.png

生成结果:

image.png

easy.qrcode.min.js下载

推荐使用npm下载

npm install easyqrcodejs

下载后就会在 node_modules\easyqrcodejs\dist 里找到。

本文作者

TANKING


TANKING
4.8k 声望493 粉丝

热爱分享,热爱创作,热爱研究。