一般在项目开发中,前端显示给用户扫描的二维码基本都是由后端代码生成的,那么这个高大上的功能能不能用 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. Windows操作系统下远程连接MySQL数据库

    用Eclipse做一个后台项目,但是数据库不想放在本地电脑,于是买了一个腾讯云服务器(学生有优惠,挺便宜的),装上MySQL数据库,但是测试连接的时候,发现总是连接不是上,但是本地数据库可以连接,于是 ...

  2. PHP 错误与异常 笔记与总结(6)将错误日志保存在系统日志中

    [将错误记录到系统日志中] 在 php.ini 中将 error_log 设置为: error_log = syslog 或者在运行时使用 ini_set() 函数设置. [例1] <?php ...

  3. maven 的一些基本操作

    maven  install :把打出的包装载到本地仓库,package:是打包的意思 每当项目中的模块里的东西发生变化的时候,先install一下项目 ,在启用maven的tomcat插件就不会报错 ...

  4. mysqldump: unknown option &#39;--no-beep&#39;

    想要备份mysql数据库时,输入mysqldump命令出现如题所示的错误,在网上找了好久,终于从一个帖子上得到了一些提示,就动手试了下,嘿  还真成了!! mysqldump --no-default ...

  5. javascript 用函数实现“继承”

    一.知识储备: 1.枚举属性名称的函数: (1)for...in:可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承属性) (2)Object.keys():返回数组(可枚举的自有属性) ( ...

  6. Windows主机和Linux虚拟机之间传输文件

    如果使用VirtualBox的增强功能, 可以实现两者之间文件相互拖拽. 但某些情况下, 比如增强功能安装遇到难以解决的问题, 或者Linux版本为server版本(例如Ubuntu Server发行 ...

  7. hibernate 使用sql 查询(setResultTransformer)

    使用方法举例如下: public List findByOid(Object oid) {  log.debug("finding all WatershedAnalyse instance ...

  8. 201521123117 《Java程序设计》第7周学习总结

    1. 本周学习总结 2.书面作业 Q1.ArrayList代码分析 1.解释ArrayList的contains源代码 源代码: //contains()方法 public boolean conta ...

  9. UVA - 1632 Alibaba 区间dp

    题意:给定n个点,其中第i个点的坐标是,且它会在秒后消失.Alibaba可以从任意位置出发,求访问完所有点的最短时间.无解输出No solution. 思路:表示访问完区间后停留在i点的最短时间,表示 ...

  10. 浅谈构建前端自动化工作流程一 之 node

    一.Node环境 1.什么是Node? Node.js类似于jquery.js,不是js文件,也不是一个js框架,而是Server side JavaScript runTime,服务端的一个JS运行 ...