二维码中间嵌入logo
大家见过不少带品牌logo的二维码,普通的黑白二维码生成比较容易,那么这种嵌入logo的二维码该如何生成呢?
基本原理
有一种比较简单的方法,就是直接在生成的黑白二维码中间覆盖一层logo. 覆盖一层logo后,必定会影响二维码的纠错能力。为了能从嵌入logo的二维码中还原数据,logo的覆盖面积要控制好。
二维码有如下四种纠错级别:
ERROR_CORRECT_L:大约<=7%的错误能纠正过来
ERROR_CORRECT_M:大约<=15%的错误能纠正过来
ERROR_CORRECT_Q:大约<=25%的错误能纠正过来
ERROR_CORRECT_H:大约<=30%的错误能纠正过来
当纠错级别越高时,二维码能容纳的数据量就越少。正是因为二维码具有一定的纠错能力,所以在二维码中间覆盖一层logo是没有问题的,只要控制好覆盖面积。
Python实现
Python有个纯Python实现的二维码生成库,叫做qrcode. 其接口使用起来比较简单,所以下面不谈如何使用qrcode库生成二维码,而是介绍如何在生成好的黑白二维码中间覆盖一层logo图片。
覆盖一层logo图片本质上属于图片处理。下面是代码:
def image_center_overlay(background_image, frontend_image, percentage=0.0625):
"""
把frontend_image覆盖到background_image的中间
:param background_image:
:param frontend_image:
:param percentage: frontend_image最多覆盖background_image多大比例
:return:
"""
b_width, b_height = background_image.size
f_width, f_height = frontend_image.size
if f_width * f_height <= b_width * b_height * percentage:
f_image = frontend_image
else:
scale = math.sqrt(b_width * b_height * percentage / (f_width * f_height))
f_width = int(math.floor(f_width * scale))
f_height = int(math.floor(f_height * scale))
f_image = frontend_image.resize((f_width, f_height), resample=Image.ANTIALIAS)
x = int(math.floor((b_width - f_width) / 2))
y = int(math.floor((b_height - f_height) / 2))
new_image = Image.new('RGB', (b_width, b_height), (255, 255, 255))
new_image.paste(background_image, box=(0, 0))
new_image.paste(f_image, box=(x, y))
return new_image
代码中的image均为PIL中的Image对象。上述方法中的percentage是如何确定的呢?其实是二维码纠错率的平方。比如,以ERROR_CORRECT_Q纠错级别生成二维码,那么percentage的值为25% * 25%,也就是0.0625.
js生成二维码 中间有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图片 可点击下载文件。
调用的jsp代码如下:
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>该二维码支持中文和LOGO</title>
8
9 <script type="text/javascript" src="jquery-1.8.0.js"></script>
10 <script type="text/javascript" src="utf.js"></script>
11 <script type="text/javascript" src="jquery.qrcode.js"></script>
12 <script type="text/javascript">
13 $(document).ready(function() {
14 $("#qrcodeCanvas").qrcode({
15 render : "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
16 text : "这是修改了官文的js文件,此时生成的二维码支持中文和LOGO", //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
17 width : "200", //二维码的宽度
18 height : "200", //二维码的高度
19 background : "#ffffff", //二维码的后景色
20 foreground : "#000000", //二维码的前景色
21 src: 'photo.jpg' //二维码中间的图片
22 });
23 });
24 </script>
25
26 </head>
27 <body>
28 <center>
29 <h2>该二维码支持中文和LOGO</h2>
30 <div id="qrcodeCanvas"></div>
31 </center>
32 </body>
33 </html>
简单的使用就到这里了
· jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO
· jQuery生成二维条形码 jquery.qrcode.js
· 通过jquery-qrcode在线生成二维码
· jquery-qrcode客户端二维码生成类库扩展–融入自定义Logo图片
· js生成二维码以及点击下载二维码
作者:笙沫
摘录:菜鸟教程和简书(本文章是由作者亲自安装没有问题可以信赖)
欢迎大家和我交流技术性问题
QQ:1348612681
https://www.runoob.com/mysql/mysql-install.html
https://www.jianshu.com/p/276d59cbc529