如何用jquery產生中間有logo的二維碼？ （附代碼）
- yulia原創
- 2018-09-13 16:34:012197瀏覽
jquery.qrcode.js 是一個能夠在客戶端產生矩陣二維碼QRCode 的jquery插件 ，使用它可以很方便的在頁面上產生二維條碼。此插件是能夠獨立使用的，體積也比較小，使用gzip壓縮後才不到4kb。因為它是直接在客戶端產生的條碼， 所以不會有圖片下載的過程，能夠實現快速產生。它是基於一個多語言的類別庫封裝的，也不依賴其他額外的服務。
好處：使用jquery-qrcode的好處，不需要在伺服器端生成多餘的二維碼圖片，二維碼直接透過JavaScript直接在客戶端生成，有效減少頻寬，以及維護成本。
首先大家可以來看看jquery.qrcode.js官網，官網上也有例子。但是官網的 jquery.qrcode.js是不支援中文的，廢話不多說了，現在我們開始吧。官網上的 qrcode.js 檔案裡沒有實作中文的支援和LOGO的添加，現在我們將這個檔案修改為jquery.qrcode.js檔案了。另外還需要一個對中文進行轉碼的文件，該文件為utf.js。然後在 jquery.qrcode.js 檔案中呼叫了 utf.js 檔案的 utf16to8(str) 方法對其中文進行了轉碼。
以下是我寫的一個範例，其中一個需要的js檔案有 jquery.qrcode.js 和 utf.js 以及 jquery-1.8.0.js 。還有一個 LOGO圖片 可點選下載檔案。呼叫的jsp程式碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>该二维码支持中文和LOGO</title>
<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", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
text : "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO", //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
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產生中間有logo的二維碼？ （附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn