前一篇文章介紹了用 Canvas 來合併、縮放、裁切圖片,文章裡面範例的圖片來源是 HTMLImageElement,這天我們美編丟了兩段 SVG(Scalable Vector Graphics)格式的 HTML,我就想說都是圖片應該都一樣吧,依樣畫葫蘆想合併這兩張圖片,結果…
[小菜一碟] 在前端使用 JavaScript 操作 Canvas 來合併 SVG(Scalable Vector Graphics)圖片
- 543
- 0
- JavaScript
前一篇文章介紹了用 Canvas 來合併、縮放、裁切圖片,文章裡面範例的圖片來源是 HTMLImageElement,這天我們美編丟了兩段 SVG(Scalable Vector Graphics)格式的 HTML,我就想說都是圖片應該都一樣吧,依樣畫葫蘆想合併這兩張圖片,結果…
在我剛學習網頁程式設計的那個年代,要在前端網頁上對圖片做除了顯示/隱藏/放大/縮小以外的處理,大都是丟到後端處理完後再丟回來,拜網頁設計技術進步所賜,生出了 Canvas 這個東西,讓我們可以利用客戶端的運算資源執行繪圖的工作,甚至要搞出一個純前端的小畫家是完全沒有問題的。
這篇文章是一個知識的分享,主要分享給不知道的朋友,我們用 JavaScript 設計一個互動的網頁,一定會用到事件(Event)
,舉凡像是按鈕的點擊、滑鼠的捲動、選項值的改變、...等等,這些都會需要事件來輔助,但是有時候我們會希望註冊給事件的方法只被觸發一次。
講到資料庫的唯一值,第一個我們會想到就是主索引鍵(Primary Key)
,那同一個資料表內除了主索引鍵之外會不會有其他的唯一值?我之前遇過的一個需求就有,它是一個部落格的功能,讀者可以收藏文章,同一篇文章不能重複收藏,而讀者可以對已收藏的文章進行任意的排序,所以「讀者 ID + 文章 ID
」就成了資料表的主索引鍵,而「讀者 ID + 序號
」就是資料表中的另一組唯一值。
Flutter 做為一個跨平台解決方案,從 2017 年橫空出世之後,短短幾年的時間便能夠在市場佔有一席之地,除了背後有 Google 的支援之外,其號稱一份原始碼就能夠在 Android、iOS、Windows、macOS、Linux、Web 上建置執行,頗有一統江湖的氣勢,這篇文章記錄我在 Windows 上,從安裝 Flutter in Android Studio,到建置並成功執行範本 App 的過程。
有一天客戶的 IT 人員從資料庫中發現,某些資料欄位被塞入不尋常的資料。
看到這些資料的當下,我第一個念頭是「會不會某支程式有 Bug 導致整批資料被更新了?
」,在排除這個原因之後,調查方向轉往「可能被駭客入侵了?
」的狀況前進。
這天客戶跑來跟我說「資料庫壞了,無法新增資料!」,出現了下面這段錯誤訊息:
Could not allocate space for object 'dbo.XXX'.'PK_XXX' in database 'YYY' because the 'PRIMARY' filegroup is full. Create disk space by deleting unneeded files, dropping objects in the filegroup, adding additional files to the filegroup, or setting autogrowth on for existing files in the filegroup.
很明顯,這段訊息告訴我們是儲存空間已滿,可是我前幾天才維護過,按照資料增加的速度,不會那麼快才對,來問問看使用者做了什麼事?
有一天 Jenkins 不再寄發建置結果通知信,追查原因是因為 Google 更新了一項安全性政策:
為保護您的帳戶安全,自 2022 年 5 月 30 日起,如果第三方應用程式或裝置只要求您以使用者名稱和密碼登入 Google 帳戶,Google 將不再支援這些應用程式或裝置。
不過這也不是沒有退路,我們可以改使用應用程式密碼登入帳戶。
之前有一個案子的使用者有一個特別的要求,因為在網頁上瀏覽的圖片大小稍微大了一點,在行動裝置上網路不穩定的時候,會載入比較久的時間,所以使用者就想說能不能在圖片顯示前,先顯示一個 Loading 的畫面,等待圖片下載完成之後再顯示出來?
上一篇文章我們簡單介紹了一下 CefSharp 的基本使用方式,直接在 WinForms/WPF 內嵌一個瀏覽器,基本上我們所有的程式邏輯都可以引入 JavaScript 套件,用 JavaScript 來開發,直接在瀏覽器端執行,但是這不代表我們不能把工作丟給 .NET 來做,必要時我們還是可以搭配 .NET 來平衡一下應用程式的工作負載,因此在 JavaScript 與 .NET 之間傳遞參數及回傳值就很重要了,這篇文章我們就來探究一下使用 CefSharp 套件,如何在 JavaScript 與 .NET 之間傳遞參數及回傳值?以及能夠傳遞的參數及回傳值的類型有哪些?