在我剛學習網頁程式設計的那個年代,要在前端網頁上對圖片做除了顯示/隱藏/放大/縮小以外的處理,大都是丟到後端處理完後再丟回來,拜網頁設計技術進步所賜,生出了 Canvas 這個東西,讓我們可以利用客戶端的運算資源執行繪圖的工作,甚至要搞出一個純前端的小畫家是完全沒有問題的。
[小菜一碟] 在前端使用 JavaScript 操作 Canvas 來合併/縮放/裁切圖片
- 66
- 0
- JavaScript
在我剛學習網頁程式設計的那個年代,要在前端網頁上對圖片做除了顯示/隱藏/放大/縮小以外的處理,大都是丟到後端處理完後再丟回來,拜網頁設計技術進步所賜,生出了 Canvas 這個東西,讓我們可以利用客戶端的運算資源執行繪圖的工作,甚至要搞出一個純前端的小畫家是完全沒有問題的。
這篇文章是一個知識的分享,主要分享給不知道的朋友,我們用 JavaScript 設計一個互動的網頁,一定會用到事件(Event)
,舉凡像是按鈕的點擊、滑鼠的捲動、選項值的改變、...等等,這些都會需要事件來輔助,但是有時候我們會希望註冊給事件的方法只被觸發一次。
上一篇文章我們簡單介紹了一下 CefSharp 的基本使用方式,直接在 WinForms/WPF 內嵌一個瀏覽器,基本上我們所有的程式邏輯都可以引入 JavaScript 套件,用 JavaScript 來開發,直接在瀏覽器端執行,但是這不代表我們不能把工作丟給 .NET 來做,必要時我們還是可以搭配 .NET 來平衡一下應用程式的工作負載,因此在 JavaScript 與 .NET 之間傳遞參數及回傳值就很重要了,這篇文章我們就來探究一下使用 CefSharp 套件,如何在 JavaScript 與 .NET 之間傳遞參數及回傳值?以及能夠傳遞的參數及回傳值的類型有哪些?
最近專案有一個需求,需求當中的一個小部分是要在網頁上將使用者輸入的內容壓縮起來存檔,之後使用者再開啟這個檔案解壓縮顯示壓縮前的內容在網頁上,仔細想想現在的硬碟空間都那麼大,好像沒有什麼壓縮的必要,但是使用者覺得有必要,那也只好做給他了。
我們在追蹤客戶端行為時,多多少少會遇到一個場景,就是要在使用者把網頁視窗關閉時,將記錄送回伺服器端,做法上我們可能會想在網頁視窗觸發 unload 事件的時候,發送 AJAX Request 回伺服器端就好了,但是這個方法在一些瀏覽器上(比如:Firefox)不 Work,取而代之 Web APIs 提供了更好的 API - sendBeacon()。
在 JavaScript 的 Promise API 中,要處理一個 Promise 的集合,有 Promise.all()、Promise.any()、…等等,可是這些 API 要嘛要等全部的 Promise 都完成了,要嘛是任一個,而且只有一個 Promise 完成了,才能串接後續的處理,沒有那種依照完成的先後順序一個接一個串接後續處理的 API,不過沒關係,利用 Promise 的特性,我們也是能做到類似的效果。