「自學經驗」回顧

Kim.H
Mar 28, 2023

--

在參加AC的學期2-3:後端開發實務課程,有一單元的作業挑戰是「短網址產生器」,使用者可以將一串網址轉換成縮短網址,在實作的時候覺得只有轉換網址會顯得有點單調,因此去參考了目前有在服務的短網址工具 reurl.cc,發現除了縮短網址外,還會提供QR Code,因此決定將這項功能也加到我的作業中。

一開始直覺是直接去查有無相關的API可以使用,查了幾個網址後發現google提供的QR code genrerate API 最直覺能上手使用。

語法如下:

根網址:https://chart.googleapis.com/chart?

必要參數:

cht=qr // 必要,指定QR code

chs={WIDTH}x{HEIGHT} // 必要,圖片的寬和高(px)

chl={DATA} // 必要,url或檔案(注意,網址長度上限為 2K)

使用方式:

將網址和參數串在一起,放入img標籤中即可顯示,如下

<img src="https://chart.googleapis.com/chart?cht=qr&chl=https://google.com&chs=150x150" ></img>

因此只要寫一個function將原始URL帶入,就能產生可以掃描至該URL的QR code啦!

function generateQRCodeURL(ori_url) {
return `https://chart.googleapis.com/chart?cht=qr&chl=${ori_url}&chs=150x150`;
}

網路上還有其他可以使用的QR code產生API,有些還能更改QR code的外觀、顏色,嘗試完簡單的語法,要來嘗試更複雜一點的使用方式囉 !

--

--

Kim.H

現任菜鳥後端工程師 / 2022.12 正式踏入轉職之旅 - 2023.09轉職成功