[小菜一碟] 在前端使用 JavaScript 操作 Canvas 來合併/縮放/裁切圖片

在我剛學習網頁程式設計的那個年代,要在前端網頁上對圖片做除了顯示/隱藏/放大/縮小以外的處理,大都是丟到後端處理完後再丟回來,拜網頁設計技術進步所賜,生出了 Canvas 這個東西,讓我們可以利用客戶端的運算資源執行繪圖的工作,甚至要搞出一個純前端的小畫家是完全沒有問題的。

...繼續閱讀 »

[小菜一碟] 在 JavaScript 如何讓註冊給事件(Event)的方法只被觸發一次?

這篇文章是一個知識的分享,主要分享給不知道的朋友,我們用 JavaScript 設計一個互動的網頁,一定會用到事件(Event),舉凡像是按鈕的點擊、滑鼠的捲動、選項值的改變、...等等,這些都會需要事件來輔助,但是有時候我們會希望註冊給事件的方法只被觸發一次。

...繼續閱讀 »

[食譜好菜] CefSharp 在 JavaScript 與 .NET 之間互相呼叫方法並且傳遞參數及回傳值

上一篇文章我們簡單介紹了一下 CefSharp 的基本使用方式,直接在 WinForms/WPF 內嵌一個瀏覽器,基本上我們所有的程式邏輯都可以引入 JavaScript 套件,用 JavaScript 來開發,直接在瀏覽器端執行,但是這不代表我們不能把工作丟給 .NET 來做,必要時我們還是可以搭配 .NET 來平衡一下應用程式的工作負載,因此在 JavaScript 與 .NET 之間傳遞參數及回傳值就很重要了,這篇文章我們就來探究一下使用 CefSharp 套件,如何在 JavaScript 與 .NET 之間傳遞參數及回傳值?以及能夠傳遞的參數及回傳值的類型有哪些?

...繼續閱讀 »

[小菜一碟] 搞懂 Day.js Timezone 外掛套件的使用方式

Day.js 是在前端的世界中,一個處理日期時間相當知名的套件,或許有朋友聽過 Moment.js,但是可以用 Day.js 的話我優先選擇使用 Day.js,最主要是它的檔案大小號稱只有 2KB,之所以可以壓到這麼小,最重要的一個原因是它將一些額外的功能,以外掛的方式分包出去,要使用的話再引用進來,而 Timezone 是其中一個外掛。

...繼續閱讀 »

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

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

...繼續閱讀 »

[小菜一碟] 在前端用 JavaScript 搭配 pako 套件實現壓縮及解壓縮

最近專案有一個需求,需求當中的一個小部分是要在網頁上將使用者輸入的內容壓縮起來存檔,之後使用者再開啟這個檔案解壓縮顯示壓縮前的內容在網頁上,仔細想想現在的硬碟空間都那麼大,好像沒有什麼壓縮的必要,但是使用者覺得有必要,那也只好做給他了。

...繼續閱讀 »

[小菜一碟] 利用 window.navigator.sendBeacon() 在使用者關閉網頁視窗時發送記錄

我們在追蹤客戶端行為時,多多少少會遇到一個場景,就是要在使用者把網頁視窗關閉時,將記錄送回伺服器端,做法上我們可能會想在網頁視窗觸發 unload 事件的時候,發送 AJAX Request 回伺服器端就好了,但是這個方法在一些瀏覽器上(比如:Firefox)不 Work,取而代之 Web APIs 提供了更好的 API - sendBeacon()

...繼續閱讀 »

[小菜一碟] 在 JavaScript 依照 Resolve 的順序處理 Promise

在 JavaScript 的 Promise API 中,要處理一個 Promise 的集合,有 Promise.all()、Promise.any()、…等等,可是這些 API 要嘛要等全部的 Promise 都完成了,要嘛是任一個,而且只有一個 Promise 完成了,才能串接後續的處理,沒有那種依照完成的先後順序一個接一個串接後續處理的 API,不過沒關係,利用 Promise 的特性,我們也是能做到類似的效果。

...繼續閱讀 »

[小菜一碟] 如何依據網頁內容變換網址但不必重新整理網頁

自從 AJAX 問世之後,由於節省頻寬、提升網頁回應速度的效果顯著,被大量採用,甚至發展出了 SPA,但是這樣反而出現了一個副作用,就是我們無法將網頁最終呈現的結果透過 URL 分享出去,不利於 SEO,我們就來看一下,怎麼在都是用非同步請求取得網頁內容的情況下,變換網址。

...繼續閱讀 »