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

时间 2019-12-13

标签 jquery qrcode 客户端二维生成扩展融入自定义 logo 图片栏目 JQuery 繁體版

原文原文链接

年后换了部门，如今主要的职责就是在网上卖精油，彷佛这个就是传说中的网络营销。javascript

跟着公司的MM们也了解不了少关于网络营销的知识，间接的了解到马云和刘强东都是些怎样龌龊的人，尽管以前也这样认为。html

淘宝就很少说了，全球最大的中文假货销售平台（尽管淘宝没有打出全球中文等字样，但是其必须当之无愧）。百度，当当等厚颜无耻之徒的明智之举就在于此，老外作的再大也不多会有直接支持中文的，所以他们都会在其名称前增长：“全球最大的中文”等字样，为本身镶金。java

以前还一直比较力挺京东的，认为其根本自营根本不会销售假货，因此最近一次手机都是在京东上购买的，I9300I 买了不到半个月京东掉价350块，一个月不到的时间直接掉价500多块，找了客服寻求“报价保护”，以后才发现京东的“价格保护”到底是如何的保护其自身的利益。反正维护老百姓的权益那是不可能的，500多块只能当喂狗了，京东收取我的商家开店费也是尽量的为我的商家输送利益，商家得利，其天然也少不了。遇到卖假货的也是先协调，协调不成最多退货赔款，售假商家依旧在京东内活跃。由于商家孝敬京东的钱不是少数。之后京东自营售假的事情，可能也就是分分钟的事情了。jquery

上述描述，纯属发泄一下本身的情绪，哈哈！git

说到正题，用朋友的话来讲，他们楼下送快餐的都有二维码，是否是咱们本身的网站也上个二维码呢？恰好公司要为奥蔓精油作个官网，想必二维码是必不可少的，所以今天对二维码进行了学习。以前对二维码一点概念都没有，竟然还无知到觉得是腾讯推出的产品，不上进坑死人啊。github

二维码的专业术语说明，请你们参照维基百科对二维码描述。ajax

用我我的的话来讲，我以为二维码就是一个字符串。不论是扫描仍是生成，都是应用这个字符串进行咱们须要的操做。可能这样说有点肤浅。不过经过解析二维码咱们得到的不就是一个指定的字符串吗？能够是产品的编号，可让咱们找到指定的商品、也能够说一个网站的链接，经过得到这个链接，咱们能够作咱们须要的动做，例如打开网页。canvas

二维码的高级应用我我的尚未系统的研究，经过扫码器扫描二维码进行库管方面的业务都是应用的案例。快递单号也可使用，经过扫码器扫描以后把ID传输到电脑中，而后进行货物的事件跟踪数据更新什么的。api

查看了京东、淘宝等网站的二维码都是先生成图片而后显示，但是在搜索资料时发现了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>

生成出来的效果图以下：

支持下小弟的工做，扫一扫，提供订单号，会有惊喜，也许是源代码哦！