Script Tạo mã qrcode sử dụng api google

Thứ Hai, 11 tháng 6, 2012
Cách tạo khá đơn giản là dùng google api để xử lý dữ liệu và trả về kết quả trên trang chủ 

 Các Bước Làm

B1: Style css cho đẹp tý

<style>

.fb_button2 {
        background-color: #3b5998;
        border-color: #d8dfea rgb(14, 31, 91) rgb(14, 31, 91) rgb(216, 223, 234);
        border-style: solid;
        border-width: 1px;
        color: #fff;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        font-size: 11px;
        margin: 0 2px;
        padding: 2px 18px;
}

#txt_qr { width:330px;margin-bottom:5px; }
#size { width:110px;}
#ecc { width:210px;}
#taoma {
margin-top:5px;
}
</style>

B2: Mã html 

<div style="float:left;width:500px;text-align:center">
<b>Nội dung cần tạo mã QR (QRCode):</b><br>
<div style="float: left; width:500px;">
<textarea class="textarea" id="txt_qr" cols="36" name="txt_qr" >Gõ Text Tại Đây </textarea>
</div>
<div style="float: left; width:500px">
<select style="margin-right:10px;"   id="ecc" name="ecc">
<option value="L">Có thể phục hồi nếu hỏng 7%</option>
<option selected="" value="M">Có thể phục hồi nếu hỏng 15%</option>
<option value="Q">Có thể phục hồi nếu hỏng 25%</option>
<option value="H">Có thể phục hồi nếu hỏng 30%</option>
</select>
<select style="margin-right: 0px;" id="size" name="size">
<option value="80x80">Size:80x80</option>
<option value="100x100">Size:100x100</option>
<option value="120x120">Size:120x120</option>
<option value="150x150">Size:150x150</option>
<option selected="" value="180x180">Size:180x180</option>
<option value="200x200">Size:200x200</option>
<option value="250x250">Size:250x250</option>
<option value="280x280">Size:280x280</option>
<option value="300x300">Size:300x300</option>
<option value="400x400">Size:400x400</option>
</select>
    </div>
<div style="float:left ;width:500px;text-align:center;padding:5px;">
    <input type="submit" id="taoma" onClick="taoQRcode();" class="fb_button2" value="Bắt Đầu Tạo Mã">
</div>
<div style="float:left ;width:500px;text-align:center;padding:5px;">
<div id="show"></div>        
</div>
</div>
** đây là nơi ảnh qr code sẽ  được hiển thị <div id="show"></div>  
*** muốn tăng kích thước của ảnh qrcode 400x400 hay bao nhiêu tùy ý bạn thì chỉ cần thay đổi , thêm bớt giá trị
<option value="400x400">Size:400x400</option>  
B3 : đến phần quan trọng nhất là script

<script type="text/javascript">
function taoQRcode(){
var txt_qr=document.getElementById('txt_qr').value;       
var ecc=document.getElementById('ecc').value;        
var size=document.getElementById('size').value;       
var show=document.getElementById('show');        
       var chl = new String(txt_qr);       
        pos = chl.indexOf('#',0);
        if (pos >= 0) {
            chl = chl.substr(0,pos);
        }   
             chl  = escape(chl); // 
        var chs  = size; 
        var choe = 'UTF-8'; 
        var chld = ecc; 
        var margin = 4; 
   var linkimage='http://chart.apis.google.com/chart?chs='+chs+'&cht=qr&chl='+chl+'&choe='+choe+'&chld='+chld+'|'+margin+'';
   show.innerHTML= unescape('<img src="'+linkimage+'" alt="QR Code" />');
   }
   </script>
trên đây là toàn bộ script  tạo qrcode đơn giản ,  tất cả code để nhét vào widget/html cho blogspot, cũng khá hay .
Xem thêm bài viết cùng chuyên mục:

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn