React + Express + WebAssembly(Go) Go側で画像ファイルをbase64エンコード

Question

前提

React + Expressで画像・動画投稿ができるシステムを作っております。
純粋にフロント側で画像をbase64に変換し、サーバー側へポストする方法で実装したのですが
base64への変換に時間がかかりすぎるためwasmを使ってみました。
wasmに繋いで適当にコンソール出力できるところまではできています。

実現したいこと

Reactから画像ファイルをwasmに渡し、wasmでbase64への変換を行いその変換結果をReactに返すということを行いたいです。

解決したいこと①Go側で画像ファイルが渡されているのかを確認できる方法を知りたい
解決したいこと②もし画像ファイルが渡されている場合どのようにエンコードすれば良いか。（os.Openに何を渡せば良いかが分かればなんとか行けそうな気がしています。）

発生している問題・エラーメッセージ

wasm側の関数を呼び出すことはできているがファイルが渡せているのか確認する方法がわからない。
ファイルを引数として受けれているのならGoでこのように受けたファイルをどのようにエンコードできるのかわからない。

該当のソースコード

wasm.js

const go = new window.Go()

export default go

Form.jsx

import React, { useState } from 'react'
import { TextField, Button, Typography, Paper } from '@material-ui/core';
import { useDispatch } from 'react-redux'
import { createChat } from '../../../actions/chats';
import useStyles from './styles'

import go from '../../../actions/wasm'

const Form = ({ gossipId }) => {
  const classes = useStyles()
  const [chatData, setChatData] = useState({message: '', selectedFile: ''})
  const user = JSON.parse(localStorage.getItem('profile'))
  const dispatch = useDispatch()
  const [ imageFile, setImageFile ] = useState({identify: '', file: null})
  const reader = new FileReader
  
  const uploadFile = async () => {
    let val = null
    let sample = null
    reader.readAsDataURL(imageFile.file)
    reader.addEventListener('load', async () => {
      await WebAssembly.instantiateStreaming(fetch("/wasm/main.wasm"), go.importObject).then((result) => {
        go.run(result.instance)
        sample = window.test(imageFile.file)
      }).catch((err) => {
        console.log(err)
      })

      val = reader.result.replace(/data:.*\/.*base64,/,'')
      dispatch(createChat({ 
        ...chatData, 
        name: user?.result?.name, 
        gossip: gossipId, 
        userId: user.result._id ? user.result._id : user.result.googleId, 
        file: val,
        identify: imageFile.identify,
        test: sample
      }))
    })
  }

  const handleSubmit = async (e) => {
    console.log('submit clicked')
    e.preventDefault()
    if (imageFile.file) {
      uploadFile()
    }else{
      dispatch(createChat({ ...chatData, name: user?.result?.name, gossip: gossipId, userId: user.result._id ? user.result._id : user.result.googleId}))
    }
    clear()
  }

  const clear = () => {
    setChatData({message: '', selectedFile: ''})
    setImageFile({identify: '', file: null})
  }

  const fileSet = (e) => {
    const files = e.target.files
    const file = files[0]
    const time = new Date().getTime()
    const identify = `chats/${user?.result?._id ? user?.result?._id : user?.result?.googleId}_${time}_${file.name}`

    setImageFile({identify: identify, file: file})
    setChatData({ ...chatData, selectedFile: identify })
  }

  if(!user?.result?.name){
    return (
      <Paper className={classes.chatFormPaper}>
        <Typography variant='h6' align='center'>
          Please Sign In to Create Your Own Chat and Like Other's Chat
        </Typography>
      </Paper>
    )
  }
  return (
    <Paper className={classes.chatFormPaper}>
      <form className={classes.form} autoComplete='off' noValidate onSubmit={ handleSubmit }>
        <Typography className={classes.formTitle} variant='h6' align='center'>Let's exchange opinions</Typography>
        <TextField 
          className={classes.messageForm}
          name='message'
          variant='outlined'
          label='Message'
          multiline
          rows={3}
          fullWidth
          value={chatData.message}
          onChange={e => setChatData({ ...chatData, message: e.target.value })}
          />
          <div className={classes.imageForm}>
            <input type='file' multiple={false} onChange={(e) => fileSet(e)}/>
          </div>
          <Button variant='contained' color='primary' size="large" type="submit" fullWidth>Submit</Button>
      </form>
    </Paper>
  )
}

export default Form

main.go

// コメントアウト部分が実行できればと考えています。
package main

import (
	"syscall/js"
	"fmt"
	// "os"
	// "io/ioutil"
	// "encoding/base64"
)

func test(this js.Value, vs []js.Value) interface{}{
	fmt.Println(this)
	fmt.Println(vs)
	fmt.Println(vs[0])
	// f, err := os.Open(vs[0].String())
	// if err != nil {
	// 	panic(err)
	// }
	// defer f.Close()

	// b, _ := ioutil.ReadAll(f)
	// out, _ := os.Create("out")
	// base64.NewEncoder(base64.StdEncoding, out).Write(b)
  return "hogehoge"
}

func setFuncs(){
	js.Global().Set("test", js.FuncOf(test))
}

func main () {
	fmt.Println("App assembly process start")
	setFuncs()
	done := make(chan struct{}, 0)
	<-done
}

試したこと

wasm側で受けとった引数のコンソール出力

実際に上記main.goのコメントアウトを外して動作を確認
main.go

package main

import (
	"syscall/js"
	"fmt"
	"os"
	"io/ioutil"
	"encoding/base64"
)

type General interface {}

func test(this js.Value, vs []js.Value) interface{}{
	// fmt.Println(this)
	// fmt.Println(vs)
	// fmt.Println(vs[0])
	f, err := os.Open(vs[0].String())
	if err != nil {
		panic(err)
	}
	defer f.Close()

	b, _ := ioutil.ReadAll(f)
	out, _ := os.Create("out")
	base64.NewEncoder(base64.StdEncoding, out).Write(b)
  return "hogehoge"
}

func setFuncs(){
	js.Global().Set("test", js.FuncOf(test))
}

func main () {
	fmt.Println("App assembly process start")
	setFuncs()
	done := make(chan struct{}, 0)
	<-done
}

結果
↓

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[tomoZQ]

前提の
base64への変換に時間がかかりすぎるためwasmを使ってみました。

→base64への変換に時間がかかっていたわけではありませんでした。
画像ファイルを渡すのではなくbase64エンコードされた文字列を渡し、文字列の加工をwasmで行う方法で実装しました。

Answer 1

最終的には下記のようにすることで納得いく速度での実装ができました。

Form.jsx uploadFile関数

const uploadFile = async () => {
    let val = null
    reader.readAsDataURL(imageFile.file)
    reader.addEventListener('load', async () => {
      await WebAssembly.instantiateStreaming(fetch("/wasm/main.wasm"), go.importObject).then((result) => {
        go.run(result.instance)
        val = window.replaceString(reader.result)
      }).catch((err) => {
        console.log(err)
      })

      dispatch(createChat({ 
        ...chatData, 
        name: user?.result?.name, 
        gossip: gossipId, 
        userId: user.result._id ? user.result._id : user.result.googleId, 
        file: val,
        identify: imageFile.identify,
      }))
    })
  }

package main

import (
	"syscall/js"
	"fmt"
	"regexp"
)

func replaceString (this js.Value, s []js.Value) interface{} {
	re := regexp.MustCompile(`^data:\w+/\w+;base64,`)
	result := re.ReplaceAllString(s[0].String(), "")
	return result
}

func setFuncs(){
	js.Global().Set("replaceString", js.FuncOf(replaceString))
}

func main () {
	fmt.Println("App assembly process start")
	setFuncs()
	done := make(chan struct{}, 0)
	<-done
}

Answer 2

WASM環境でosパッケージのほとんどは動作しません。
また、ブラウザ上ではいろんな制約があります。

なので、フロントエンド側で読み込んだ画像データなどをWASMの関数に直接渡すなどの手法を試すことをお勧めします。

func uint8array2bytes(dv js.Value) []byte {
	b := make([]byte, dv.Get("byteLength").Int())
	js.CopyBytesToGo(b, global.Get("Uint8Array").New(dv.Get("buffer")))
	return b
}

func image2base64(img js.Value) string {
	return base64.StdEncoding.EncodeToString(uint8array2bytes(img))
}

画像をUInt8Arrayにする方法はJavaScript側で考えてみてください。

追記

base64変換が遅いというのは小さな単位で処理しているからかもしれません。
以下のようにJavascriptに備えられた変換を利用するというのも検討してみてください。
WASMは小さな単位の繰り返しにおいてJSよりも早い結果が得られますが、
JS埋め込みの機能利用だとJSのほうが早いことが多いです。

<html>
<h2>Example of converting image to string</h2>
<body>
<input type="file" onchange="enc(this)" />
<script>
function enc(element) {
  let reader = new FileReader();
  let f = element.files[0];
  reader.onloadend = function() {
    document.write('String Output: ', reader.result);
  }
  reader.readAsDataURL(f);
}
</script>
</body></html>

この場合「data:image/png;base64,iViejk...==」という結果が得られますので、「data:image/png;base64,」という部分を取り除くとBASE64に変換した結果を得ることができます。

Comments

[nobonobo]

動画などでオンメモリに置くことが難しいという話であれば、ストリーミング技術なども検討する必要がありそうですが、GoとJS側とで相互にストリーミング処理する機能は用意されていません。どちらかが他方のやり方に合わせる必要があります。JSのストリームオブジェクトをGo側から利用するか、Goのio.Reader、io.Writerの操作をJS側から行うなど。

[tomoZQ]

ありがとうございます。
JSで画像ファイルをUint8Arrayに変換してからwasm側に渡すということですね。
まだJS側でUint8Arrayに変換する方法を調査中ですので
完了し、動作が確認できしだいご報告させていただきベストアンサーとさせていただきます。

[tomoZQ]

何度も回答の方編集いただき、さまざまご教示いただきありがとうございました。
私はこの質問を出させていただいた通り、ファイルのエンコードに時間がかかっているとばかり思っていました。
なのでwasm側にファイルを渡して...という方法を検討していたのですが、nobonobo様のご教示によりosパッケージがブラウザ上で機能しないのでそれは難しいとのことがわかりました。

この質問を出させていただく前はnobonoboさんがおっしゃる下記のやり方でやっていたのですが
>> この場合「data:image/png;base64,iViejk...==」という結果が得られますので、「data:image/png;base64,」という部分を取り除くとBASE64に変換した結果を得ることができます。

その後いろいろな部分で処理にかかった時間をコンソール出力してみたところエンコードの部分ではなくエンコードした後の文字列加工に時間がかかっていることがわかりました。
具体的には
>> data:image/png;base64
これを取り除く処理でreplaceを使用していたのですが
replace(/data:.*\/.*base64,/,'')
としてしまっており、これに時間がかかっていたことがわかりました。

ここからはせっかくなのでWebAssemblyを使用してみたいということでbase64エンコードした文字列をwasmに渡し、加工したものを返す方法で実装するということをしてしまったので憶測になりますが

replaceの第一引数での表現が不味かったので文字列内全てで「data:image/png;base64,」を検索し時間がかかってしまっていたものと思われます。

replace(^/data:.*\/.*base64,/,'')

として文字列の先頭であることだけ指定してあげればよかった話かもしれません。