利用jquery.qrcode.js生成二維碼和logo居中的圖片 js生成二維碼
在項目中經(jīng)常需要用到二維碼的地方，如果都用服務(wù)器端生成的話就會很消耗資源。于是，直接通過JavaScript直接在客戶端生成，有效減少帶寬，以及維護(hù)成本。
之前我介紹過用jquery.qrcode.js生成二維碼的方法，這里是需要在生成二維碼的中間加上logo。并且右鍵保存是一張圖。
前往 如何用jquery.qrcode.js插件在線生成二維碼
官網(wǎng)上的 qrcode.js 文件里沒有實現(xiàn)中文的支持和LOGO的添加，現(xiàn)在我們將這個文件修改為jquery.qrcode.js文件了。
此外還需要一個對中文進(jìn)行轉(zhuǎn)碼的文件，該文件為utf.js。然后在jquery.qrcode.js 文件中調(diào)用了utf.js 文件的 utf16to8(str)方法對其中文進(jìn)行了轉(zhuǎn)碼。
下面是我寫的一個示例，該示例需要的js文件有jquery.qrcode.js和utf.js以及jquery-1.8.0.js 。還有一個LOGO圖片可點(diǎn)擊下載文件。
文件下載地址：
鏈接: https://pan.baidu.com/s/1eRT2JGe 密碼: gm28
調(diào)用的html代碼如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <me
ta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - <ti
tle>該二維碼支持中文和LOGO</ti tle> - <script type="text/javascript" src="jquery-1.8.0.js"></script>
- <script type="text/javascript" src="utf.js"></script>
- <script type="text/javascript" src="jquery.qrcode.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#qrcodeCanvas").qrcode({
- render : "canvas" //設(shè)置渲染方式，有table和canvas，使用canvas方式渲染性能相對來說比較好
- text : "高蒙博客" //掃描二維碼后顯示的內(nèi)容可以直接填一個網(wǎng)址，掃描二維碼后自動跳向該鏈接
- width : "200" //二維碼的寬度
- height : "200" //二維碼的高度
- background : "#ffffff" //二維碼的后景色
- foreground : "#000000" //二維碼的前景色
- src: 'photo.jpg' //二維碼中間的圖片
- });
- });
- </script>
- </head>
- <body>
- <center>
- <h2>該二維碼支持中文和LOGO</h2>
- <div id="qrcodeCanvas"></div>
- </center>
- </body>
- </html>
以上就是利用jquery.qrcode.js生成二維碼和logo居中的圖片，并且右鍵保存是一張圖。
以上就是利用jquery.qrcode.js生成二維碼和logo居中的圖片，并且右鍵保存是一張圖。
