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

    echo -e "\033[背景;字体颜色m 字符串\033[0m" eg : echo -e "\033[30m 黑色字 \033[0m"   字体颜色(30 ...

  2. Linux第三节课学习笔记

    常见执行Linux命令的格式:命令名称 [命令参数] [命令对象]. 命令参数分长格式与短格式,短格式之间可合并. echo命令用于在终端输出字符串或变量提取后的值,格式为“echo [字符串 | $ ...

  3. 控制使用jquery load()方法载入新页面中的元素

    最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...

  4. web前端调试的消除缓存对更改页面的影响

    平时调试网页的时候经常会短时间多次修改html和css文件,已达到最好的体验效果,但是有时候因为浏览器缓存的原因就导致虽然代码修改了,但是 页面还是没什么变化, 经常以为是自己代码修改的不对, 之后发 ...

  5. 第六节《Git克隆》

    本节学习如何使用git clone命令建立版本库克隆,以及如何使用git push和gitpull命令实现克隆之间的同步. Git的版本库目录和工作区在一起,因此存在一损俱损的问题,即如果删除一个项目 ...

  6. Vue --- :is

    1.1 基本示例 <div id="app"> <!-- template slot transition --> <input type=" ...

  7. 2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解

    2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解 NOP, JNE, JE, JMP, CMP汇编指令的机器码 NOP汇编指令:执行到NOP指令时,CPU仅仅当做一个 ...

  8. LOJ 2548 「JSOI2018」绝地反击 ——二分图匹配+网络流手动退流

    题目:https://loj.ac/problem/2548 如果知道正多边形的顶点,就是二分答案.二分图匹配.于是写了个暴力枚举多边形顶点的,还很愚蠢地把第一个顶点枚举到 2*pi ,其实只要 \( ...

  9. 剑指offer 8.递归和循环 跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果).   解题思路一: a.如果两种跳法,1阶或者2阶,那么假定第一次跳的是 ...

  10. lay-verify 无效

    lay-verify 无效 使用lay-verify有两个需要注意的地方: form标签需要添加 class="layui-form" 提交按钮需要添加 lay-submit=&q ...