一般在项目开发中，前端显示给用户扫描的二维码基本都是由后端代码生成的，那么这个高大上的功能能不能用 JS 来绘制呢？ 答案是肯定的

首先我们需要一个插件 jquery.qrcode.js，该插件基于 jquery 插件，使用方法很简单，如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>二维码</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

    <script src="https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js"></script>

</head>

<style type="text/css">

    #output {

        width: 360px;

        padding: 0;

    }

</style>

<body>

    <div id="output"></div>

</body>

<script type="text/javascript">

    $('#output').qrcode({

        text: "ninhaonihaohnihao",      // 二维码的内容

        render: "canvas",               // 设置渲染方式

        width: 360,                     // 设置宽度: 默认256

        height: 360,                    // 设置高度: 默认256

        background: "#ffffff",          // 背景颜色

        foreground: "#000000",          // 前景颜色

    });

</script>

</html>

效果如下，这样，我们就可以自己生成 二维码了，可以用手机扫一扫，发现能完美获得 配置的内容

可是我们发现，某些官方网站的二维码中间是有 logo 的，那么这个可以加 logo 吗？

目前该插件不支持该功能，可是笔者是有强迫症的人，这个黑乎乎的二维码怎么能满足我呢，百度 google 一番，通过修改了插件的一些源码，终于实现了想象中的效果

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>二维码</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

    <script src="https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js"></script>

</head>

<style type="text/css">

    #output {

        width: 360px;

        padding: 0;

        margin: 100px auto 0 auto;

    }

</style>

<body>

    <div id="output"></div>

</body>

<script type="text/javascript">

    $('#output').qrcode({

        text: "ninhaonihaohnihao",      // 二维码的内容

        render: "canvas",               // 设置渲染方式

        width: 360,                     // 设置宽度: 默认256

        height: 360,                    // 设置高度: 默认256

        background: "#ffffff",          // 背景颜色

        foreground: "#000000",          // 前景颜色

        src: "./my.jpg",                // logo地址, 图片居中, 图片为二维码的 1/9 为最佳，可适当调整，但是太大会影响二维码的内容

        imgWidth: 120,                  // logo宽度

        imgHeight: 120                  // logo高度

    });

</script>

</html>

效果如下，图片选的不是很好，效果不好看，不过总算是实现了

修改后的插件已上传到博客园，有兴趣的朋友可以下载看看，顺便看看能不能再优化  https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js

大家可以直接引用改地址，也可以下载后在本地引入

HTML5 使用 JS 生成二维码，带头像的更多相关文章

  1. （转）js jquery.qrcode生成二维码 带logo 支持中文

    场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...

  2. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

  3. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  4. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  5. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  6. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  7. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  8. php--------使用js生成二维码

    php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...

  9. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

随机推荐

  1. 《python for data analysis》第二章，美国1880-2010年出生人口姓名的数据分析

    <利用python进行数据分析>第二章的姓名例子,代码.整个例子的所有代码集成到了一个文件中,导致有些对象名如year同时作为了列名与行名,会打印warning,可分不同的part依次运行 ...

  2. digital envelope routines:EVP_DecryptFinal_ex:wrong final block length问题原因分析

    最近在做一个项目时,使用openssl中的aes进行加密和解密,使用相同的密钥但是出现下面的错误日志: 139868329146176:error:0606506D:digital envelope ...

  3. 分布式事务（二）Java事务API(JTA)规范

    一.引子 既然出现了分布式场景(DTP模型), 大java也及时制定出一套规范来给各大应用服务器.数据库/mq等厂商使用,以方便管理互通--->JTA闪亮登场.JTA(Java Transact ...

  4. Dubbo 入门学习笔记

    项目结构 模块介绍: DubboAPI    ----API接口 DubboConsumer ----消费者 DubboProvider ----生产者 DubboAPI  Service 提供的接口 ...

  5. python3-基础1

    eval()  --- 返回表达式计算结果 实际上就是把括号中的命令提取出来执行一遍. eval("print('ok')") ok 可变类型: 在ID不变的情况下,value可变 ...

  6. Javascript校验密码复杂度的正则表达式

    1.密码中必须包含大小字母.数字.特称字符,至少8个字符,最多30个字符. var regex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.* ...

  7. python基础知识16---函数补充

    一 数学定义的函数与python中的函数 初中数学函数定义:一般的,在一个变化过程中,如果有两个变量x和y,并且对于x的每一个确定的值,y都有唯一确定的值与其对应,那么我们就把x称为自变量,把y称为因 ...

  8. RAMOS和SSD对比

    http://bbs.pcbeta.com/forum.php?mod=redirect&goto=findpost&ptid=1786284&pid=48341400RAMO ...

  9. Laya for H5 之Bug追踪

    Laya For H5之Bug追踪 H5游戏一旦上线后,如何跟踪用户的崩溃日志呢?现在有很多第三方的工具,比如fundebug,其sdk接入简单,只需寥寥几行代码就可以追踪h5游戏的崩溃日志,bug日 ...

  10. python 文件处理（转载）

    本文给大家介绍Python文件处理相关知识,具体内容如下所示: 出处:https://www.jb51.net/article/80204.htm 1.文件的常见操作 文件是日常编程中常用的操作,通常 ...