alexandre/PaletteSwitcher
1
0
Fork 0
Code Issues 4 Pull Requests 9 Actions Packages Projects Releases Activity

React client app #5

Merged
CrispyBaguette merged 18 commits from react-client-app into master 2021-12-12 17:42:16 +00:00
Conversation 0 Commits 18 Files Changed 47 +18 -9
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6816585d61 - Show all commits

10
client/src/App.tsx
View File

@ -10,7 +10,6 @@ function App() {
return; return;
} }
const workerProxy: any = await wasmWorker("main.wasm"); const workerProxy: any = await wasmWorker("main.wasm");
setImageSrc(""); setImageSrc("");
// Check if a file was selected // Check if a file was selected
@ -23,9 +22,12 @@ function App() {
reader.onloadend = async (evt) => { reader.onloadend = async (evt) => {
if (evt.target!.readyState === FileReader.DONE) { if (evt.target!.readyState === FileReader.DONE) {
const imageData = new Uint8Array(evt.target!.result as ArrayBuffer); const imageData = new Uint8Array(evt.target!.result as ArrayBuffer);
const ditheredImage = await workerProxy.DitherNord(imageData); const ditheredImageArray = await workerProxy.DitherNord(imageData);
const outputValue = `data:image/png;base64,${ditheredImage}`; const imageBlob = new Blob([ditheredImageArray.buffer], {
setImageSrc(outputValue); type: "image/png",
});
const url = URL.createObjectURL(imageBlob);
setImageSrc(url);
} }
}; };
}; };

17
src/wasm.go
View File

@ -2,7 +2,6 @@ package main
import ( import (
"bytes" "bytes"
b64 "encoding/base64"
"encoding/hex" "encoding/hex"
"image" "image"
"image/color" "image/color"
@ -69,7 +68,7 @@ func decodeImage(imageData []byte) (image.Image, error) {
} }
// DittherNord returns a Promise that takes a UintArray containing a Jpeg or png image, // DittherNord returns a Promise that takes a UintArray containing a Jpeg or png image,
// and resolves to a string containing a base64 encoded png image. // and resolves to a UintArray containing the dithered image.
func DitherNord() js.Func { func DitherNord() js.Func {
return js.FuncOf(func(this js.Value, args []js.Value) interface{} { return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
imageBytes := make([]byte, args[0].Length()) imageBytes := make([]byte, args[0].Length())
@ -96,12 +95,20 @@ func DitherNord() js.Func {
log.Printf("Image dithered in %v\n", t2.Sub(t1)) log.Printf("Image dithered in %v\n", t2.Sub(t1))
// Encode as PNG // Encode as PNG
log.Println("Encoding image...")
t1 = time.Now()
buf := new(bytes.Buffer) buf := new(bytes.Buffer)
png.Encode(buf, ditheredImage) png.Encode(buf, ditheredImage)
t2 = time.Now()
log.Printf("Image encoded in %v\n", t2.Sub(t1))
// Encode as img src b64 string and resolve log.Println("Copying image to JS...")
encodedImage := b64.StdEncoding.EncodeToString(buf.Bytes()) t1 = time.Now()
resolve.Invoke(js.ValueOf(encodedImage)) encodedImage := js.Global().Get("Uint8ClampedArray").New(len(buf.Bytes()))
js.CopyBytesToJS(encodedImage, buf.Bytes())
t2 = time.Now()
log.Printf("Image copied in %v\n", t2.Sub(t1))
resolve.Invoke(encodedImage)
}() }()
return nil return nil