一般在项目开发中，前端显示给用户扫描的二维码基本都是由后端代码生成的，那么这个高大上的功能能不能用 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. Poj2688cleaningrobot

    这道题让我们求一个地图上的各个点之间的最短路径说白了旅行商问题. 那么我们先用一个裸的BFS求出各个点之间的最短距离,然后我们再枚举各个点的全排列即可 这道题的细节很多,详见注释 上代码~ #incl ...

  2. Vue2.5基础

    1.1 创建第一个Vue实例 官方网站:https://cn.vuejs.org 学习 --> 安装 刚开始学习Vue,使用最简单的安装方式,直接用<script>引入 我们下载开发 ...

  3. Zuul网关总结

    Zuul是Netflix开源的网关服务(gateway service)(https://github.com/Netflix/zuul),提供动态路由.监控.弹性.安全性等功能.最近在公司的项目中用 ...

  4. ActiveMQ (一) 简介

    1.ActiveMQ简介 先分析这么一个场景:当我们在网站上购物时,必须经过,下订单.发票创建.付款处理.订单履行.航运等.但是,当用户下单后,立即跳转到“感谢那您的订单” 页面.不仅如此,若果没有延 ...

  5. Proxifier代理工具简介和下载

    Proxifier 是一款功能非常强大的socks5客户端,可以让不支持通过代理服务器工作的网络程序能通过HTTPS或SOCKS代理或代理链.支持64位系统,支持Xp,Vista,Win7,支持soc ...

  6. docker容器以ROOT账号登录（获取ROOT权限/ROOT密码）

    第一步:查看容器的CONTAINER ID docker ps 第二步:获取root权限,例如需要进入的CONTAINER ID为4650e8d1bcca docker exec -ti -u roo ...

  7. 【网络】IP子网划分详解

    1.IP地址组成                                IP地址组成示意图 IP地址由32位二进制组成,32位二进制分成了4字节,每字节8位,字节之间用符.(点)分隔,为了方便 ...

  8. Verilog编码规范与时序收敛

    Verilog编码规范与时序收敛 没有优先级的时候,尽量用case 时钟选择

  9. 高度自适应的div

    需求:有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度 1.用flex 来实现 思路:flex 垂直布局(column),第一个元素固定高度,第二个元素flex ...

  10. AttributePriority

    还有AttributePriority,我们可以设置编译时优先级.如果我们对目标标记了多个aspect,这样postsharp就不确定注入先后顺序,这样不能确保正确性,在vs编译时候我们会看见警告:T ...