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

    ftp://mama.indstate.edu/linux/tree/ download & make

  2. MySQL Execution Plan--IN子查询包含超多值引发的查询异常1

    ======================================================================= SQL语句: SELECT wave_no, SUM(I ...

  3. Java 内部类的作用

    1.内部类可以很好的实现隐藏 一般的非内部类,是不允许有 private 与protected权限的,但内部类可以 2.内部类拥有外围类的所有元素的访问权限 3.可是实现多重继承 4.可以避免修改接口 ...

  4. Zuul网关总结

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

  5. Go 学习资料

    Go 学习资料 网址 Go 中文版 http://docscn.studygolang.com/ Go 语言教程(菜鸟教程) http://www.runoob.com/go/go-tutorial. ...

  6. Centos 7 安装图形化环境

    安装系统时,使用了最小化安装,当需要用到图形界面的时候需要安装图形界面支持 环境是centos7.5最小化安装 1,先更新系统 yum -y upgrade 这里说明一下upgrade和update的 ...

  7. C# 如何获取SQL Server 中指定数据表的所有字段名和字段类型

    如何获取指定数据表的所有字段名和字段类型.SqlConnection.GetSchema方法有2个重载形式,获取指定数据表的所有字段名和字段类型的秘密就在GetSchema (String, Stri ...

  8. SecureCRT 6.7 vim高亮

    cp /etc/vimrc ~/.vimrc set nocompatible                 "去掉有关vi一致性模式,避免以前版本的bug和局限 set nu!      ...

  9. 转载----五种开源协议(GPL,LGPL,BSD,MIT,Apache)

    原文地址:https://www.oschina.net/question/54100_9455 五种开源协议(GPL,LGPL,BSD,MIT,Apache) 什么是许可协议? 什么是许可,当你为你 ...

  10. win10 vs2015源码编译opencv、opencv_contrib、Tesseract

    1.软件包准备 opencv源码包地址:                官网  github opencv_contrib源码包地址:   github Tesseract源码包地址:        ...