I'm Full-Stack Delverloper

  1. Home
  2. Blog
  3. Detail

สร้าง QR Code ได้ง่ายๆ ไม่กี่บรรทัดด้วย Google Chart

  3438

การสร้าง QR Code นั้นมีหลายวิธีต่างๆ ที่นักพัฒนาหลายคนเลือกใช้ ไม่ว่าจะเป็นการดาวน์โหลด Plugin , การใช้ Library ต่างๆ เป็นต้น ซึ่งแน่นอนว่ามันสะดวกมากๆ โดยที่เราไม่ต้องทำอะไรมาก แค่ปรับชุดคำสั่งของ Library นั้นและส่ง Value ไปเพื่อให้สามารถสร้าง QR Code ได้  นั่นก็ถือว่าเป็นทางเลือกที่ดีเลยทีเดียว แต่ข้อเสียคือจะมีการ include ไฟล์ต่างๆ ค่อนข้างเยอะ และโค้ดก็เยอะเช่นกัน ถึงแม้เราจะไม่ได้เขียนเองทั้งหมดนะ    แต่จะมีอีกวิธีที่ง่ายๆมาก ไม่กินทรัพยากรของ Project เรา  แถมไม่ต้องโหลดและติดตั้งอะไรเยอะแยะเพียงแค่เขียนโค้ดไม่กี่บรรทัดซึ่งเป็นบริการของ Google Chart นั่นเอง

Code
https://chart.googleapis.com/chart?choe=UTF-8&chs=ความกว้างxความสูง&cht=qr&chl=ข้อความ

โดยจะมีตัวแปรผ่าน Query String 2 ตัวแปรหลักๆ ที่เราจะต้องใช้คือ  

  • chs : กำหนดความกว้าง และ ความสูง
  • chl: ข้อความ
Example
https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=fhunsiwakorn

fhunsiwakorn.png

ตัวอย่างภาษาไทย

https://chart.apis.google.com/chart?cht=qr&chs=200x200&choe=UTF-8&chl=%E0%B8%AA%E0%B8%A7%E0%B8%B1%E0%B8%AA%E0%B8%94%E0%B8%B5%E0%B8%8A%E0%B8%B2%E0%B8%A7%E0%B9%82%E0%B8%A5%E0%B8%81

chart.png

ตัวอย่างการเขียน function 

function 
<script language="JavaScript">
      function genQrcode() {
        let tmpurl =
          "https://chart.googleapis.com/chart?cht=qr&chl=" +
          genqr.val.value +
          "&chs=180x180&choe=UTF-8";
        document.getElementById("txtval").innerHTML = tmpurl;
        document.getElementById("imgurl").src = tmpurl;
      }
</script>

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>QR Code : Google Chart</title>
  </head>
  <body onload="genQrcode()">
    <form name="genqr">
      <div>
        <input
          type="text"
          name="val"
          id="val"
          value="https://www.fhunsiwakorn.com"
          size="60"
          onchange="genQrcode();"
        /><input type="button" value="Generate" onclick="genQrcode();" />
      </div>
      <div>
        <img
          id="imgurl"
          src="https://chart.googleapis.com/chart?cht=qr&chl=https://www.fhunsiwakorn.com&chs=180x180&choe=UTF-8"
          border="0"
          width="180"
          height="180"
        />
      </div>
    </form>
    <div>
      <span id="txtval"></span>
    </div>
    <script language="JavaScript">
      function genQrcode() {
        let tmpurl =
          "https://chart.googleapis.com/chart?cht=qr&chl=" +
          genqr.val.value +
          "&chs=180x180&choe=UTF-8";
        document.getElementById("txtval").innerHTML = tmpurl;
        document.getElementById("imgurl").src = tmpurl;
      }
    </script>
  </body>
</html>

 

08-4-2556.PNG

 

  สร้าง QR Code ได้ง่ายๆ ไม่กี่บรรทัดด้วย Google Chart   Generate QR Code   Plugin QR CODE   Google Chart