The main branch of Go has recently completed a WebAssembly work prototype implementation. As a fan of WASM, I naturally have to play with it. In this article, I'm going to make a note of the idea of using Go to process image experiments over the weekend. This demo simply takes the image input from the browser and applies a variety of image transformations, such as brightness, contrast, hue, saturation, etc., and finally dumps it back into the browser. This tests two things-simple CPU binding execution, which is what the image conversion should do, as well as passing data between JS and Go. # # Callback should be clear how to call between JS and Go, not our common way in Emscripten, it is to expose a function and then call it from JS. In Go, the interoperation of JS is done through callbacks. In your GO code, set the callback that can be called from JS. These are the main event handlers that you want to execute in the GO code. It looked like this--' ' ' Gojs. Neweventcallback (JS. Preventdefault, func (Ev js. Value) {//Handle event}) "This has a pattern-as your app grows, it becomes a list of DOM event callback handlers. I think of it as the URL processor for REST apps. For the sake of specification, I use all callbacks as the method of my main structure and associate them in one place. Similar to when you declare a URL processor in a different file and set all the routes in one place. "' 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) "Then write your callback in a separate file-" "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)})} ' # # # Execution I spit out the way the image data is passed from Go to the browser. In the image upload, I set the SRC attribute to the Base64 encoding format of the entire image, which is passed to the Go code to decode it to binary, apply the transform and then back up the base64 and set the SRC attribute of the target image. This makes the DOM very heavy and needs to pass a huge string from go to JS. If WASM Sharedarraybuffer some support may improve. I'm also looking at setting up pixels directly in the canvas to see if there's any benefit. Even to reduce the base64 conversion should take some time. (Please do not hesitate to enlighten other methods) # # Performance for a 100KB JPEG image, the time required to apply the conversion is approximately 180~190 milliseconds. This time increases with the size of the image. This is tested with Chrome 65. (FF has been an error, I have no time to investigate)! [Performance Snapshot Display] (https://raw.githubusercontent.com/studygolang/gctt-images/master/ Experiments-with-image-manipulation-in-wasm-using-go/wasm1.png) Performance Snapshot display! [Heap quite large.] Heap snapshot approx. 1GB] (https://raw.githubusercontent.com/studygolang/gctt-images/master/ Experiments-with-image-manipulation-in-wasm-using-go/wasm2.png) heap is quite large. Heap snapshot about 1gb## finishing Idea complete library in this-[github.com/agnivade/shImmer] (Https://github.com/agnivade/shimmer). Feel free to use. Remind me that this is the day I write, and all the obvious improvements. I will study it further. Attached:-Note that the image transform is not applied to another image. This means that if you change the brightness and then change the hue, the resulting image will only change the hue of the original image. This is the now-to-do item.
Via:http://agniva.me/wasm/2018/06/18/shimmer-wasm.html
Author: agniva Translator: themoonbear proofreading: polaris1119
This article by GCTT original compilation, go language Chinese network honor launches
This article was originally translated by GCTT and the Go Language Chinese network. Also want to join the ranks of translators, for open source to do some of their own contribution? Welcome to join Gctt!
Translation work and translations are published only for the purpose of learning and communication, translation work in accordance with the provisions of the CC-BY-NC-SA agreement, if our work has violated your interests, please contact us promptly.
Welcome to the CC-BY-NC-SA agreement, please mark and keep the original/translation link and author/translator information in the text.
The article only represents the author's knowledge and views, if there are different points of view, please line up downstairs to spit groove
296 Reads
