jquery-qrcode客户端二维码生成类库扩展--融入自定义Logo图片
年后换了部门，现在主要的职责就是在网上卖精油，似乎这个就是传说中的网络营销。
跟着公司的MM们也了解不了少关于网络营销的知识，间接的了解到马云和刘强东都是些怎样龌龊的人，尽管之前也这样认为。
淘宝就不多说了，全球最大的中文假货销售平台（尽管淘宝没有打出全球中文等字样，可是其必须当之无愧）。百度，当当等厚颜无耻之徒的明智之举就在于此，老外做的再大也很少会有直接支持中文的，因此他们都会在其名称前增加：“全球最大的中文”等字样，为自己镶金。
之前还一直比较力挺京东的，认为其根本自营根本不会销售假货，所以最近一次手机都是在京东上购买的，I9300I 买了不到半个月京东掉价350块，一个月不到的时间直接掉价500多块，找了客服寻求“报价保护”，之后才发现京东的“价格保护”究竟是如何的保护其自身的利益。反正维护老百姓的权益那是不可能的，500多块只能当喂狗了，京东收取个人商家开店费也是尽可能的为个人商家输送利益，商家得利，其自然也少不了。遇到卖假货的也是先协调，协调不成最多退货赔款，售假商家依旧在京东内活跃。因为商家孝敬京东的钱不是少数。以后京东自营售假的事情，可能也就是分分钟的事情了。
上述描述，纯属发泄一下自己的情绪，哈哈！
说到正题，用朋友的话来说，他们楼下送快餐的都有二维码，是不是我们自己的网站也上个二维码呢？刚好公司要为奥蔓精油做个官网，想必二维码是必不可少的，因此今天对二维码进行了学习。之前对二维码一点概念都没有，居然还无知到以为是腾讯推出的产品，不上进坑死人啊。
用我个人的话来说，我觉得二维码就是一个字符串。不管是扫描还是生成，都是应用这个字符串进行我们需要的操作。可能这样说有点肤浅。不过通过解析二维码我们获得的不就是一个指定的字符串吗？可以是产品的编号，可以让我们找到指定的商品、也可以说一个网站的连接，通过获得这个连接，我们可以做我们需要的动作，例如打开网页。
二维码的高级应用我个人还没有系统的研究，通过扫码器扫描二维码进行库管方面的业务都是应用的案例。快递单号也可以使用，通过扫码器扫描之后把ID传输到电脑中，然后进行货物的事件跟踪数据更新什么的。
查看了京东、淘宝等网站的二维码都是先生成图片然后显示，可是在搜索资料时发现了jquery-qrcode，一个不错的jquery类库。Google已经快一个月不能使用了，期间被迫使用了几天百度，最终给我的体验只有两个字：“恶心”。用百度我似乎什么资料都找不到，排在首位的永远都是花钱的，要么就是百度百科，百度知道里的毫无用处的垃圾链接。今天一个天基本都在使用Google，心情好好的无法比拟。有需要的可以联系我，每年只需300块钱。
使用jquery-qrcode的好处，不需要在服务器端生成多余的二维码图片，二维码直接通过JavaScript直接在客户端生成，有效减少带宽，以及维护成本。
jquery-qrcode的简单用例，再此我就不再做累赘的翻译阐述了，因为我压根也不会英语。请参考jquery-qrcode官网，并下载类库，里边的例题很详细。
需要引用jquery类库(例题中使用的是1.5.2版本，其连接到google服务中，暂时不能访问，为什么不能访问，你懂的，需要看效果时，请自己替换“https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”为本地文件),其次再把“jquery.qrcode.min.js”引用了，这样必要的环境就搭建起来了。
使用过程中不知道有哪些配置参数，请参考“jquery.qrcode.js”的源文件。
可是在我的使用中发现jquery-qrcode只能生成二维码图形，却不能直接在二维码图形中加入我们自定义的Logo图片。因此我对其类库进行了扩展，该修正版添加了Logo功能，只需要配置src属性即可。生成时Logo图片会占据设置宽高的2.5为比例。例如二维码宽高均为200时，Logo的宽高则为200/2.5=80。
这里使用到JavaScript为Canvas标记添加img标签的问题，请参照stackoverflow上的帖子《How to add image to canvas》。
下载我修改后的“jquery.qrcode.min.js”文件，不要再引用官方的了，引用从本帖下载的js文件。下载链接
调用代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Demo page</title>
</head>
<body>
<p>
http://jeromeetienne.github.io/jquery-qrcode/ <br />
原版jquery-qrcode二维码生成，使用jquery-qrcode的好处，不需要在服务器端生成多余的二维码图片，二维码直接通过JavaScript直接在客户端生成，减少带宽。 <br />
该修正版添加了Logo功能，只需要配置src属性即可。生成时Logo图片会占据设置宽高的2.5为比例。例如二维码宽高均为200时，Logo的宽高则为200/2.5=80。
</p>
<div id="output">
</div> <script src="../jquery.min.js"></script> <script type="text/javascript" src="../jquery.qrcode.min.js"></script><!--这里不再调用官方的压缩文件，换成从本帖内下载的jquery.qrcode.min.js文件--> <script>
jQuery(function() {
jQuery('#output').qrcode({
text: "http://aoman.tmall.com/",
height: 250,
width: 250,
src: 'AroMiin.jpg'//这里配置Logo的地址即可。
});
}) </script> </body>
</html>
生成出来的效果图如下：
支持下小弟的工作，扫一扫，提供订单号，会有惊喜，也许是源代码哦！
jquery-qrcode客户端二维码生成类库扩展--融入自定义Logo图片的更多相关文章
- QRCode二维码生成方案及其在带LOGO型二维码中的应用（1）
原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) 提要:很多公司为商业宣传之需,常将企业LOGO加入二维码中,但如果LOGO遮挡区域足够地大,二维码就变得无法识别.那么,有没有一 ...
- QRCode二维码生成方案及其在带LOGO型二维码中的应用（2）
原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 续前:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) http://blog.csdn.net/johnsu ...
- 利用phpqrcode二维码生成类库和imagecopymerge函数制拼接图片的经验
前期准备 引入phpqrcode类库(下载地址:https://sourceforge.net/projects/phpqrcode/) PHP开启GD扩展库支持 1.利用phpqrcode生成二维码 ...
- 利用phpqrcode二维码生成类库合成带logo的二维码并且用合成的二维码生成海报(二)
前期准备 引入phpqrcode类库(下载地址:https://download.csdn.net/download/weixin_37557729/11891240:支持彩色二维码的下载地址:htt ...
- 使用PHP二维码生成类库PHP QR Code生成二维码
<?php include 'phpqrcode.php'; $value = 'http://www.helloweba.com'; //二维码内容 $errorCorrectionLevel ...
- QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式
目录 功能介绍 常见问题 效果图与示例 apk Gradle 依赖 布局文件 自定义属性说明 接口说明 关于我 功能介绍 根据之前公司的产品需求,参考 barcodescanner 改的,希望能帮助到 ...
- JAVA实现QRCode的二维码生成以及打印
喜欢的朋友可以关注下,粉丝也缺. 不说废话了直接上代码 注意使用QRCode是需要zxing的核心jar包,这里给大家提供下载地址 https://download.csdn.net/download ...
- Winform窗体实现简单的二维码生成和保存
二维码的生成需要用到二维码生成的类库,ThoughtWorks.QRCode.dll 步骤: 第一步:下载二维码生成类库,ThoughtWorks.QRCode.dll 第二步:新建winform项目 ...
- HTML5实现扫描识别二维码/生成二维码
扫描识别二维码 思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源. 2. 利用canvas使用相关算法分析图片识别图 ...
随机推荐
- k8s daemonset controller源码分析
daemonset controller分析 daemonset controller简介 daemonset controller是kube-controller-manager组件中众多控制器中的 ...
- python2升级到python3 yum不可用解决方案
/usr/libexec/urlgrabber-ext-down /usr/bin/yum 这两个文件解释器 写 /usr/bin/python2
- Solon 1.6.10 重要发布，现在有官网喽！
关于官网 千呼万唤始出来: https://solon.noear.org .整了一个月多了,总体样子有了...还得不断接着整! 关于 Solon Solon 是一个轻量级应用开发框架.支持 Web. ...
- JAVA生成订单编号工具类
JAVA根据时间戳和随机数方式生成订单编号工具类 OrderUtils.java package com.util; import java.text.DateFormat; import java. ...
- java源码——计算大于一个数的最小素数
根据输入数字,计算大于一个数的最小素数. 话不多说,直接贴码. package com.fuxuemingzhu.countprime.main; import java.util.Scanner; ...
- 【LeetCode】326. Power of Three 解题报告（Java & Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 循环 递归 取对数 判断是不是最大3的倍数的因子 日 ...
- codeforce A. 2Char（水题，暴力）
今晚发了个蛇精病,然后CF了,第一题这好难啊,然而水题一个,暴力飘过. 链接http://codeforces.com/contest/593/problem/A: 题意比较难懂吗?傻逼百度都翻译不对 ...
- fastapi（一）
废话不多说,直接上代码. 目录结构, 由于我也是刚开始学这个框架,只是了解了怎么注册蓝图,JWT的集成,数据库的集成,想了解更多,自行打开官方文档去详细阅读.fastapi官网文档链接 创建一个mai ...
- 第六个知识点:我们怎么把NP问题解释成一组可以在多项式内证明的命题
第六个知识点:我们怎么把NP问题解释成一组可以在多项式内证明的命题 原文地址:http://bristolcrypto.blogspot.com/2014/11/52-things-number-6- ...
- 第二十三个知识点：写一个实现蒙哥马利算法的C程序
第二十三个知识点:写一个实现蒙哥马利算法的C程序 这次博客我将通过对蒙哥马利算法的一个实际的实现,来补充我们上周蒙哥马利算法的理论方面.这个用C语言实现的蒙哥马利算法,是为一个位数为64的计算机编写的 ...