JS調用產生二維碼

最後更新：2014-05-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style code java c tar ext

之前一直採用的是java後台調用qrcode.jar的形式產生二維碼，然後web前台展示的形式顯示二維碼，後來感覺如果能調用JS架構產生二維碼的話不久更好。至少能減少與瀏覽器的互動次數，減輕背景壓力。

搜了一些資料後感覺沒有一個拿來就能用的，至少IE瀏覽器的相容還是有問題，通過自己的調試寫了一個demo.希望能夠協助到大家，為大家節省時間

具體的demo可以通過http://download.csdn.net/detail/fugui6611634/7337467來下載

將一個字串（可以是中文，在產生二維碼圖片之前將中文轉碼）產生二維碼圖片，如果想要帶log的二維碼，可以在產生後的二維碼中間部位自己添加一個小log，log圖片不要太大，不然就掃描不出內容了。

[html] view plaincopyprint?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery.qrcode.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#bt").bind("click", function () {
text = $("#text").val();
$("#div_div").qrcode(utf16to8(text));
})
})
function utf16to8(str) { //轉碼
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
</script>
</head>
<body>
<input type="text" id="text" />
<input type="button" value="shengc" id="bt" />
<div id="div_div" style="width:400px;height:400px;border:1px solid #000;"></div>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>    <script src="js/qrcode.js" type="text/javascript"></script>    <script src="js/jquery.qrcode.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#bt").bind("click", function () {                text = $("#text").val();                $("#div_div").qrcode(utf16to8(text));            })        })        function utf16to8(str) { //轉碼            var out, i, len, c;            out = "";            len = str.length;            for (i = 0; i < len; i++) {                c = str.charCodeAt(i);                if ((c >= 0x0001) && (c <= 0x007F)) {                    out += str.charAt(i);                } else if (c > 0x07FF) {                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));                } else {                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));                }            }            return out;        }      </script></head><body><input type="text" id="text" /><input type="button" value="shengc" id="bt" /><div id="div_div" style="width:400px;height:400px;border:1px solid #000;"></div></body></html>

 
  jQuery(‘#output‘).qrcode({width:200,height:200,correctLevel:0,text:content}); 
  具體的參數說明參見以下
 
 
  render : "canvas|table",//設定渲染方式 
  width : 256, //設定寬度 
  height : 256, //設定高度 
  typeNumber : -1, //計算模式 
  correctLevel : QRErrorCorrectLevel.H,//錯誤修正等級 
  background : "#ffffff",//背景顏色 
  foreground : "#000000" //前景顏色

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JS調用產生二維碼

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support