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

    安装Mysql   1 Centos 6.6下安装Mysql很简单, yum list mysql-server 2 当只有一个时候就可以直接 yum install mysql-server 进行安 ...

  2. BZOJ1030——文本生成器

    给你若干给字符串,再给你一个m,问长度是m的字符串中包含给定字符串的数量mod 10007是多少 这个拿过来啥思路也没有,后来还是看了题解,才知道,原来,原来....那个带fail的Trie还可以搞别 ...

  3. fp = fopen(s, &quot;at&quot;) 中at 是啥意思,a 是append 追加的意思

    打开一个s的stream, a表示append,就是说写入处理的时候是接着原来文件已有内容写入,不是从头写入覆盖掉, t表示打开文件的类型是文本文件, "+号表示对文件既可以读也可以写.&q ...

  4. Hibernat之关系的处理多对多

    第一步:编写两个pojo,比如一个学生表一个课程表  这里使用注解. 需要 课程表: package com.qcf.pox; import java.util.HashSet; import jav ...

  5. 使用arcpy.mapping模块批量出图

      出图是项目里常见的任务,有的项目甚至会要上百张图片,所以批量出土工具很有必要.arcpy.mapping就是ArcGIS里的出图模块,能快速完成一个出图工具. arcpy.mapping模块里常用 ...

  6. MSIL实用指南-加载null、string、long、float、double等值

    本篇讲述怎么加载null.string值.long值.float值.double值. 加载null不需要参数值,只要 Emit ldnull 其它几个命令要 Emit <指令> <值 ...

  7. Springboot 6.Springboot 返回cookies信息的验证和post接口开发及常见错误解决

    在介绍之前先将一个小插件:lombok  ,在prefrence里面点击plugins,然后搜索lombok,进行install就可以了 首先将pom文件里面的lombok引进来 <depend ...

  8. mysql 唯一索引与null.md

    mysql 的唯一索引要求所有参与的列都不能够为 null 值,如果唯一索引中的任何一个元素含有 null 值,则唯一约束将不起作用. 示例代码 create table tb ( a int, b ...

  9. spring事务[转]

    https://www.cnblogs.com/cnmenglang/p/6410848.html 先了解事务的7种传播属性: PROPAGATION_REQUIRED -- 支持当前事务,如果当前没 ...

  10. JAVA 注解的基本原理

    以前,『XML』是各大框架的青睐者,它以松耦合的方式完成了框架中几乎所有的配置,但是随着项目越来越庞大,『XML』的内容也越来越复杂,维护成本变高. 于是就有人提出来一种标记式高耦合的配置方式,『注解 ...