iT邦幫忙

DAY 18
2

遭遇PHP之經驗分享系列 第 18

[鐵人賽Day18]使用Google API產生QR code

在現在智慧型手機普及的時代,看到QR code就可以用手機相機掃描,查看藏在裡頭的資訊,而這種行為漸漸變成一種趨勢
想到週圍人在最近提到過,什麼樣的東西想當配QR code讓客戶可以用手機得知一些商品資訊,也讓客戶可以覺得新奇

那就想到PHP如何產生QR code呢
查詢了一下資訊,看到有人貼Google Developers上有類似產生QR code的Google API
https://developers.google.com/chart/infographics/?hl=zh-TW

而介紹裡頭寫了詳細的使用說明
https://google-developers.appspot.com/chart/infographics/docs/overview

「https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world」
https://chart.googleapis.com/chart? -所有信息圖表開始的URL,這個URL後跟一個或多個參數/值。
chs - 以像素為單位的圖像大小,格式為<寬度 > x < 高 >
cht - 圖像類型:"qr"是指QR code
chl - 資料進行編碼,必須是URL的編碼格式

此外,這裡還有其餘幾個參數的詳細說明
https://developers.google.com/chart/infographics/docs/qr_codes?hl=zh-TW
像是choe=<output_encoding>是指說資料進行編碼時所用的編碼方式

而在這有寫出一個簡易的範例,讓使用者可以快速地上手
https://developers.google.com/chart/infographics/docs/post_requests?hl=zh-TW

搭配jQuery及jQuery AJAX,實際Try一次看看,程式碼如下:
「Google_QRcode.php」

    <title>PHP使用Google API產生QR code並使用PHP下載</title>
   
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(function () {
            $("#qrcreate").click(function () {
                createqrcode();            
            });
            $("#range").change(function () {
                createqrcode();
            });
            function createqrcode() {
                var input_text = $("#input_text").val();
                var width = $("#range").val()
                var rectangle = width + "x" + width;
                var url = "https://chart.googleapis.com/chart?chs=" + rectangle + "&cht=qr&chl=" + input_text + "&choe=UTF-8&chld=M|2";
                var qr_code = "<img alt='Your QRcode' src='" + url + "' />";
                $('#qrcode').html(qr_code);
                $('#range_value').html(width);
            }
            
            $("#down_img_btn").click(function(){
                var input_text = $("#input_text").val();
                var range = $("#range").val();
                $.ajax({
                url: "down_img.php",
                data: "&input_text="+input_text+"&range="+range,
                type:"POST",
                dataType:'text',

                success: function(message){
                    document.getElementById("message").innerHTML=message;
                },

                error:   function(jqXHR, textStatus, errorThrown){ 
                document.getElementById("message").innerHTML=errorThrown; 
                }
                }); 
            });
        });
    </script>



        資料內容:<input id="input_text" name="input_text" type="text" /> <input id="qrcreate" type="button" value="建立QRcode" /><br />
        QR code大小:<input id="range" name="range" max="300" min="50" step="10" type="range" value="170" /> Range Value:<label id="range_value">170</label><br />
        <input id="down_img_btn" name="down_img" type="button" value="下載圖片" />
        <div id="message"></div>
        <div id="qrcode"></div>

「down_img.php」

<?php
    header('content-type: image/png');
    
    $input_text=$_POST['input_text'];
    $range=$_POST['range'];
    $url="https://chart.googleapis.com/chart?chs=".$range."&cht=qr&chl=".$input_text."&choe=UTF-8&chld=M|2";
    $input = "$url"; //路徑位置
    $output = "C:\\".iconv("UTF-8","big5",$input_text).'.jpg'; //儲存檔案名稱
    file_put_contents($output, file_get_contents($input));
    
    echo('已下載到C:\,檔名為'.$input_text.'.jpg');
?>

輸出畫面如下圖:


上一篇
[鐵人賽Day17]當PHP相遇Cookie與Session所擦出的火花
下一篇
[鐵人賽Day19]strlen與mb_strlen的差別與應用
系列文
遭遇PHP之經驗分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言