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

    感谢     https://www.cnblogs.com/DreamDrive/p/6193530.html 创建表: DROP TABLE DEPT; --部门表 CREATE TABLE DE ...

  2. vs2017 asp.net 网站发布问题 （发布路径下含源码文件）

    使用vs2010版本,网站发布后会自动将源码发不为.dll程序集,但vs2017需要进行设置,其他版本没有试过. vs2017网站发布: 1. 2. 这里给一个你想用的名字,之后它会出现在你的程序文件 ...

  3. sqlmap的安装

    来自:http://www.51testing.com/html/89/n-3711589.html 一.下载 首先,需下载SqlMap以及适用于Windows系统的Python.下载地址如下: 1. ...

  4. 常用的HTML模板(转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. day62 中间件

    一.中间件的介绍 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级, 并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用, 用不好 ...

  6. MySQL必知必会 前10章学习笔记

    1. 在使用用户名和密码登陆MySQL数据库之后,首先需要指定你将要操作的数据库 USE $数据库名称 2. 使用SHOW 命令可以查看数据库和表中的信息 SHOW DATABASES; #列出可用数 ...

  7. Spring Boot的日志配置

    一.配置logback日志 Spring Boot默认使用logback打印日志 需要增加依赖 <groupId>org.springframework.boot</groupId& ...

  8. spring boot项目中处理Schedule定时任务

    项目中,因为使用了第三方支付(支付宝和微信支付),支付完毕后,第三方支付平台一般会采用异步回调通知的方式,通知商户支付结果,然后商户根据通知内容,变更商户项目支付订单的状态.一般来说,为了防止商户项目 ...

  9. [UE4]瞬移之后的朝向

    一.Set Actor Rotation:设置绝对朝向:Set Actor Relative Rotation:设置相对朝向 二.瞬移以后,角色的朝向和相机的朝向是不一样的,和头显的朝向不是同一个朝向 ...

  10. idea git commit撤销

    到项目目录下,打开git bash 1.git log 找到要撤销的版本id1 commit之前的版本id2 2.git reset –hard id13.git reset id2 参考链接:htt ...