利用JavaScript生成二维码并且中间有logo
一、描述
描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件,使用它可以很方便的在页面上生成二维条码。此插件是能够独立使用的,体积也比较 小,使用gzip压缩后才不到4kb。因为它是直接在客户端生成的条码, 所以不会有图片下载的过程,能够实现快速生成。它是基于一个多语言的类库封装的,也不依赖于其他额外的服务。
好处:使用jquery-qrcode的好处,不需要在服务器端生成多余的二维码图片,二维码直接通过JavaScript直接在客户端生成,有效减少带宽,以及维护成本。
首先大家可以看一下jquery.qrcode.js官网,官网上也有例子。但是官网的 jquery.qrcode.js是不支持中文的,废话不多说了,现在我们开始吧。
官网上的 qrcode.js 文件里没有实现中文的支持和LOGO的添加,现在我们将这个文件修改为jquery.qrcode.js文件了。此外还需要一个对中文进行转码的文件,该文件为 utf.js。然后在jquery.qrcode.js 文件中调用了 utf.js 文件的 utf16to8(str) 方法对其中文进行了转码。
下面是我写的一个示例,该示例需要的js文件有 jquery.qrcode.js 和 utf.js 以及 jquery-1.8.0.js 。还有一个 LOGO图片 可点击下载文件。
调用的html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>该二维码支持中文和LOGO</title><script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="utf.js"></script>
<script type="text/javascript" src="jquery.qrcode.js"></script>
<script type="text/javascript">$(document).ready(function() {$("#qrcodeCanvas").qrcode({render : "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好text : "<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">http://www.baidu.com</span>", //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接width : "200", //二维码的宽度height : "200", //二维码的高度background : "#ffffff", //二维码的后景色foreground : "#000000", //二维码的前景色src: 'photo.jpg' //二维码中间的图片});});
</script></head>
<body><center><h2>该二维码支持中文和LOGO</h2><div id="qrcodeCanvas"></div></center>
</body>
</html>
二、源码下载
利用JavaScript生成二维码并且中间有logo相关推荐
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimj... DIV <div id="qrcode" ...
- Spring Boot电商项目57:订单模块六:【前台:生成支付二维码】接口;(支付url的拼凑;利用zxing生成二维码;二维码图片的存储;真实地址与可访问地址的转换;)
说明: (1)本篇博客主要内容是:开发[前台:生成支付二维码]接口: (2)本篇博客需要注意的点有: ● 支付url的拼凑: ● 利用zxing生成二维码: ● 二维码图片的存储:真实地址与可访问地址 ...
- 利用VUE生成二维码(两种方式)
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
- javascript生成二维码
http://www.w3dev.cn/article/20140617/javascript-create-QR-code.aspx jquery.qrcode.js 是居于jquery类库的绘制二 ...
- zxing 生成二维码,可设置logo、二维码颜色、白边大小
主要是使用google的zxing 生成二维码,可设置logo.二维码前景色/后景色.白边大小.二维码大小 1.用到jar包 <dependency><groupId>com. ...
- Java实现生成二维码(内嵌LOGO和无LOGO均可)扫描进入目标网址
效果图: <<<<<< = = = = = = >>>>>> 1.导入maven依赖 <dependency>< ...
- java使用zxing生成二维码,可带logo和底部文字
java使用zxing生成二维码,可带logo和底部文字 springboot中整合zxing生成二维码 一.导入依赖 <properties><zxing.version>3 ...
- PHP开发日志 ━━ php、javascript生成二维码的三种方法
最简单最实例的goolge开源方法 推荐手册:php完全自学手册 1.google开放api 代码如下: $urlToEncode="http://www.helloweba.com&quo ...
- Java利用Zxing生成二维码及解析二维码内容
前言 Java 操作二维码的开源项目很多,如 SwetakeQRCode.BarCode4j.Zxing 等等 本篇文章是介绍利用Zxing来生成二维码图片在web网页上展示,同时解析二维码图片. Z ...
最新文章
- Error: no such column
- Keil升级了,Keil Studio 来了!
- 【离散数学】实验 旅行路线规划问题
- 浅谈OpenCL四大模型之Execution Model
- [literature]地下铁文本
- vivo S5官方广告正式揭晓:11月14日发布!
- android平板开机动画,实战——Android5.0开机动画定制
- 微信小程序底部导航栏中间突出
- TC软件详细设计文档(手机群控)
- 【mcuclub】舵机-SG90
- 802.11 - 灵活组播服务(Flexible multicast service)
- ug二次开发环境配置
- 笔记本安装双系统教程
- 一步一步的手写Promise
- 如何在生产环境mysql删除亿万级数据解并且不影响数据库主从延迟的解决方案
- spring boot整合jsp报错 Whitelabel Error Page 500或者404 问题处理
- 什么是Web?Web Service、Web API傻傻分不清楚?
- 计算机开机慢怎么办,电脑开机速度慢怎么办?电脑开机慢五大处理方法介绍
- MySQL语句的条件查询
- 手机设备端口9006刷回9008救砖步骤