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>