[料理佳餚] 一個可以讓我們隨心所欲調整圖片大小、解析度的高 CP 值圖床服務 - bunny.net

如果我們希望顯示在我們網站上的圖片符合一定的大小,一個方式是在上傳的時候就做嚴格控管,另外一個方式是在顯示的時候隨著我們設定的參數即時調整,我們選擇的解決方案是後者的話,那麼我們可以不用自己做,這篇文章要來跟大家介紹一個可以即時調整圖片大小、解析度,甚至裁切、翻轉、模糊化、上浮水印的一個圖床服務 - bunny.net

bunny.net 實質上它是一個雲端的檔案儲存服務,目前為止它在全球有 90 個以上的 CDN PoPs(包括台灣),而可以任意調整圖片的其實是它其中一個模組 - Optimizer,一個月只要 9.5 鎂,而且沒有使用量的限制,相當划算,下面我就來說明我們怎麼來使用這樣的一個服務。

新增 Storage Zone

首先,我們到它的官網註冊一個帳號,註冊帳號的部分我就不多說了,註冊完之後,我們到 Storage 的設定頁面,點擊 Add Storage Zone,用來儲存我們上傳的圖片。

有一點要注意,就是有一些 Storage Region 它必須開啟異地備份(Enable GEO Replication),像是 Asia (Singapore),這就表示我們得付兩份的費用,不過好像也沒得選。

目前 bunny.net 有提供 14 天或是 1000 GB 儲存空間的試用,在超過之前都不用付錢,它的消費方式是必須先儲值一筆錢在它那裡,再依照我們的使用量慢慢扣。

上傳圖片

Storage Zone 建好之後,我們就可以開始將圖片上傳到 bunny.net,方便起見,我直接在 Storage Zone 的管理介面上傳圖片,實際在專案上則是使用 bunny.net 官方的 Library - BunnyCDN.Net.Storage 來上傳圖片,除了 .NET 版本的之外,官方還提供了 JavaPHP 版本的 Library。

連結 Pull Zone

到這邊我們還沒辦法瀏覽圖片,還需要連結一個 Pull Zone 才行,我們切換到「Pull Zones」管理介面,點選「Add Pull Zone」,輸入「Name」之後,根據我們使用者所在的地區來挑選「Pricing zones」,不同的 Pricing Zone 價格不同,這個我們就自己斟酌。

連結 Pull Zone 之後會產生一個專屬的網址,我們就可以透過這個網址來瀏覽圖片。

啟動 Bunny Optimizer

最後就是啟動 Optimizer 模組,我們切換到個別的 Pull Zone 設定畫面,點選「Bunny Optimizer」將其啟動。

然後,我們捲動畫面往下看,就會發現其實 Optimizer 支援的不只有圖片本身的處理而已,還有 JS/CSS 檔案最小化、自動上浮水印、依據載具調整圖片最大寬度等功能,這些就留給各位朋友去探索了,在挑選完要開啟的功能之後,點擊「SAVE CONFIGURATION」就完成了。

圖片處理可以調整的參數不少,我們可以參考 Optimizer 的官方文件來進行設定,像我們如果要調整最大寬度,則就在圖片網址的後面加上 width=xxx

以上,bunny.net 的圖床服務就推薦給大家參考看看,無論是正在尋找類似服務,還是正在開發類似服務的朋友,bunny.net 值得嘗試。

相關資源

C# 指南
ASP.NET 教學
ASP.NET MVC 指引
Azure SQL Database 教學
SQL Server 教學
Xamarin.Forms 教學