Go 的主分支最近完成了一個 WebAssembly 的工作原型實現。作為 WASM 的愛好者，我自然要把玩一下。這篇文章，我要記下周末我用 Go 做的處理映像實驗的想法。這個示範只是從瀏覽器中擷取映像輸入，然後應用各種映像變換，如亮度，對比，色調，飽和度等，最後將其轉儲回瀏覽器。這測試了兩件事 - 簡單的CPU綁定執行，這是映像轉換應該做的事情，以及在 JS 和 Go 之間傳遞資料。## 回調應該明確如何在 JS 和 Go 之間進行調用，不是我們在 emscripten 中的常用的方式；它是暴露一個函數然後從 JS 調用它。在 Go 中，JS 的互操作是通過回調完成的。在您的 GO 代碼中，設定可以從 JS 調用的回調。這些是您希望在 GO 代碼中執行的主要事件處理常式。它看起像這樣 -```gojs.NewEventCallback(js.PreventDefault, func(ev js.Value) {// handle event})```這有個模式-隨著你的應用增長，它成為一個 DOM 事件回調處理常式列表。我把它看作 REST 應用的 URL 處理器。為了規範，我把所有回調作為我的主結構的方法並在一個地方關聯它們。類似於你把 URL 處理器聲明在不同的檔案裡並在一個地方設定所有路由一樣。```go// Setup callbackss.setupOnImgLoadCb()js.Global.Get("document").Call("getElementById", "sourceImg").Call("addEventListener", "load", s.onImgLoadCb)s.setupBrightnessCb()js.Global.Get("document").Call("getElementById", "brightness").Call("addEventListener", "change", s.brightnessCb)s.setupContrastCb()js.Global.Get("document").Call("getElementById", "contrast").Call("addEventListener", "change", s.contrastCb)```然後在一個單獨檔案裡編寫您的回調 -```gofunc (s *Shimmer) setupHueCb() {s.hueCb = js.NewEventCallback(js.PreventDefault, func(ev js.Value) {// quick return if no source image is yet uploadedif s.sourceImg == nil {return}delta := ev.Get("target").Get("value").Int()start := time.Now()res := adjust.Hue(s.sourceImg, delta)s.updateImage(res, start)})}```## 執行我吐槽的是映像資料從 Go 傳給瀏覽器的方式。在映像上傳時，我把 src 屬性設定為整個映像的base64編碼格式，該值傳到 Go 代碼中對其解碼為二進位，應用轉換然後再編回 base64 並設定靶心圖表像的 src 屬性。這使得 DOM 非常沉重，需要從 Go 傳遞一個巨大的字串到 JS。 如果 WASM 中 SharedArrayBuffer 有所支援可能會改善。我也在研究在畫布中直接設定像素，看看有沒有任何好處。即使為了消減這個 base64 轉換也應該花些時間。（請不吝賜教其他方法）## 效能對於一個 100KB 的 JPEG映像，應用轉換所需時間約為180～190毫秒。這個時間隨著映像大小而增加。這是使用 Chrome 65 測試的。（FF一直報錯，我也沒時間調查）效能快照顯示堆相當大。堆快照大約1GB## 整理想法完整庫在這 - [github.com/agnivade/shimmer](https://github.com/agnivade/shimmer)。隨意使用。提醒一下這是我一天寫的，所有顯然會有改進的地方。我會進一步研究。附：- 請注意，映像變換不會應用於另一個映像之上。就是說如果您更改亮度然後更改色調，則產生的映像將僅改變原始映像的色調。這是現在的待辦項目。
via: http://agniva.me/wasm/2018/06/18/shimmer-wasm.html
作者：AGNIVA 譯者：themoonbear 校對：polaris1119
本文由 GCTT 原創編譯，Go語言中文網 榮譽推出
本文由 GCTT 原創翻譯，Go語言中文網 首發。也想加入譯者行列，為開源做一些自己的貢獻嗎？歡迎加入 GCTT！
翻譯工作和譯文發表僅用於學習和交流目的，翻譯工作遵照 CC-BY-NC-SA 協議規定，如果我們的工作有侵犯到您的權益，請及時聯絡我們。
歡迎遵照 CC-BY-NC-SA 協議規定 轉載，敬請在本文中標註並保留原文/譯文連結和作者/譯者等資訊。
文章僅代表作者的知識和看法，如有不同觀點，請樓下排隊吐槽
296 次點擊
