reset and begin
4/26/2012

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

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ủ
xem Demo
 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 .

Bloger Comments
G+ Comments
Comments FaceBook

1 comment:

  1. Qr code giống barcode( mã vạch ) nhưng có nhiều tác dụng hơn mã vạch -> http://shimivn.blogspot.com/2012/02/tim-hieu-ve-qr-code.html - đôi dòng về qr code

    ReplyDelete

List

Profiles Information


About me : Nothing is 1 vài thứ - 1985

Places I've Lived : I Hà Nội

Home Page : http://www.shimivn.blogspot.com/

Think : 1:1000000000

Languages spoken : Vietnamese,English.

Mobile : sony C2305

dell : i3-Ram 3GB- HDD 250GB .