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图片,布布扣,bubuko.com

时间: 2024-08-06 03:47:12

jquery-qrcode客户端二维码生成类库扩展--融入自定义Logo图片的相关文章

HP QR Code (php二维码生成类库)

HP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo,查看地址: http://phpqrcode.sourceforge.net/ 下载官网提供的类库后,只需要使用phpqrcode.php就可以生成二维码了,当然您的PHP环境必须开启支持GD2. phpqrcode.php提供了一个关键的png()方法,其中参数$text表示生成二位的的信息文本:参数$outfile表示是否输出二维码图片 文件,默认否:参数$level表示容错率,也就是

利用phpqrcode二维码生成类库和imagecopymerge函数制拼接图片的经验

前期准备 引入phpqrcode类库(下载地址:https://sourceforge.net/projects/phpqrcode/) PHP开启GD扩展库支持 1.利用phpqrcode生成二维码: 原理分析: 下载下来的类文件是一个压缩包,包含很多文件和演示程序,我们只需要里边的phpqrcode.php 这一个文件就可以生成二维码了,它是一个多个类的集合文件,我们需要用到里边的QRcode类的png()方法: public static function png($text, $outf

利用phpqrcode二维码生成类库合成带logo的二维码并且用合成的二维码生成海报(二)

前期准备 引入phpqrcode类库(下载地址:https://download.csdn.net/download/weixin_37557729/11891240:支持彩色二维码的下载地址:https://download.csdn.net/download/weixin_37557729/11891244) PHP开启GD扩展库支持 1.利用phpqrcode生成二维码: 原理分析: 下载下来的类文件是一个压缩包,包含很多文件和演示程序,我们只需要里边的phpqrcode.php 这一个文

微信开发只 二维码生成类库

最近weiphp 二次开真的有点累,漏洞百出.代码维护代价有点高. <?php /** * Created by PhpStorm. * User: bin * Date: 15-1-16 * Time: 上午9:48 */ namespace Home\Common; // 微信处理类 set_time_limit(30); class Weixin{ //构造方法 static $qrcode_url = "https://api.weixin.qq.com/cgi-bin/qrcod

QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式

参考链接:https://github.com/bingoogolapple/BGAQRCode-Android 原文地址:https://www.cnblogs.com/xindejiyi/p/10440006.html

HTML5实现扫描识别二维码/生成二维码

扫描识别二维码 思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源. 2. 利用canvas使用相关算法分析图片识别图片得出结果,可用jquery.qrcode分析二维码 .(技术点:getImageData) 局限性: 移动平台支持getUserMedia/Stream API的浏览器比较少,支持列表http://caniuse.com/#feat=stream (目前没发现有IOS是支持的) 代码实现: 感谢gi

使用PHP生成二维码的两种方法(带logo图像)

一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: $urlToEncode="http://www.jb51.net"; generateQRfromGoogle($urlToEncode); /** * google api 二维码生成[QRcode可以存储最多4296个字母数字类型的任意文本,具体可以查看二维码数据格式] * @param string $chl 二维码包含的信息,可以是数字.字符.二进制信息

二维码生成插件(jquery.qrcode.js)说明文档

jquery.qrcode.js 是一个纯浏览器用于生成二维码图片的插件,生成的 QRcode 无需下载图片,并且不依赖第三方服务,下面插件使用的是压缩版本,大小不超过4K qrcode.js 是实现二维码数据计算的核心类, jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)默认是canvas,canvas方式还支持右键图片下载 使用方法(jquery.qrcode.min.js)-----轻量级实现方式

.NET 二维码生成(ThoughtWorks.QRCode)

引用ThoughtWorks.QRCode.dll (源代码里有) 1.简单二维码生成及解码代码: //生成二维码方法一 private void CreateCode_Simple(string nr) { QRCodeEncoder qrCodeEncoder = new QRCodeEncoder(); qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE; qrCodeEncoder.QRCodeScale = 4