小程式:使用GAS影像代理伺服器顯示其他伺服器上的影像
這篇是寫一個簡單網頁， 搭配前一篇:GAS小程式:影像代理伺服器 cowork-with-ai，就能顯示DataURL的影像
網頁內容
將檔案以記事本存檔成index.html, 請注意副檔名
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head><meta charset="UTF-8"></head>
<body>
<h1>顯示DataURL的圖片</h1>
<input id="imgUrl" type="text" size="120">
<input type="submit" onclick="loadImg(event);">
<img id="by-proxy">
<script>
const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/{script-id}/exec';
function loadImg() {
const imgUrl = document.getElementById('imgUrl').value;
console.log(`imgUrl:${imgUrl}`);
fetch(APPS_SCRIPT_URL + '?imageUrl=' + encodeURIComponent(imgUrl))
.then(r => r.text())
.then(dataUrl => document.getElementById('by-proxy').src = dataUrl)
}
</script>
</body>
</html>
網頁的功能
1. 一個 imgUrl的輸入框可以給你輸入任意影像URL
2. 按下送出後會呼叫loadImg函數。
3. 稍待幾秒，在下坊by-proxy中顯示取回的遠端影像
script內容解說
1. 變數APPS_SCRIPT_URL設定GAS影像代理伺服器的URL
2. 從id為imgUrl的網頁元素取出內容，也就是從網頁提供給使用者的輸入框取回內容
3. 使用fetch函數非同步來與GAS影像代理伺服器溝通
4. 取回資料因為代理伺服器是給予文字輸出，所以呼叫r.text()取得DataURL內容
5. 將DataURL內容設定給id為by-proxy的網頁元素，以完成顯示
後續功能的延伸
影像代理伺服器的延伸應用是:1.下載遠端的圖片，2.打包圖片供下載。
由於瀏覽器大多已具備CORS限制存取，雖然可以透過img標籤顯示在網頁上，但是卻無法提供諸如下載或是非同步存取，這時候透過代理伺服器就能取回資料再利用。
留言