ブラウザからファイル入出力させるpng_pathの生成

https://github.com/ukyo/emscripten-fileio
を参考に．

まずfab.cのfopenで指定している，
1. input_file_name -> "input"に変更，
2. output_file_name -> "output"に変更する．

はまりどころ，考慮する点としては
・fab.cのfopenにおける入力ファイル名と出力ファイル名をinput, outputいうプレースホルダにする
・そのプレースホルダをemscripten file stream APIが提供するロケーションにバインドする(pre.js)
・ファイルの引数の指定の仕方（header.js）→ラッパー関数の引数を選択抽出して引数配列に渡す
・処理が終わってからModule.ret()する（footer.js）→setIntervalで巡回して処理完了を検出している

fab.cの変更

   input_file = fopen("input", "rb"); // void fab_read_stl(struct fab_vars *v, char *input_file_name) {
   input_file = fopen("input", "rb"); //void fab_read_png(struct fab_vars *v, char *input_file_name) {
   input_file = fopen("input","rb"); //void fab_read_array(struct fab_vars *v, char *input_file_name) {
   input_file = fopen("input","r"); //void fab_read_path(struct fab_vars *v, char *input_file_name) {
   output_file = fopen("output", "wb"); //void fab_write_png_K(struct fab_vars *v, char *output_file_name) {
   output_file = fopen("output","wb");// void fab_write_array(struct fab_vars *v, char *output_file_name) {
   output_file = fopen("output","w");// void fab_write_path(struct fab_vars *v, char *output_file_name) {

File stream APIに必要なJSを用意する．
pre.js

Module['preRun'] = function(){
    FS.createDataFile(
        '/',
        'input',
        Module['input'], //引数から入力できるようにするためのもの
        true,
        true
    );
    FS.createDataFile(
        '/',
        'output',
        [],
        true,
        true
    );
    Module['ret'] = function(){
        return FS.findObject("/output").contents; //最終的に返り値になる
    };
};

header.js

function png_path(input,error,diameter,offset,overwrap,intensity){
    var Module = { //さきにModule作っちゃう
        input: input //pre.jsで読み込まれる
    };
    arguments = ["dummy_input","dummy_output",error,diameter,offset,overwrap,intensity];//こうしないとmain関数のargvとして読み込まれるので注意

footer.js

 var timerId = setInterval(function(){
       if(FS.findObject("/output").contents !== null){
           console.log("Output file ready."); 
           console.log(String.fromCharCode.apply(null, Module.ret()));
           clearInterval(timerId);
       }
    },300);

}

http://d.hatena.ne.jp/seinzumtode/20141202/1417498960 を参考にビルドする．
build.sh

#!/bin/sh
emcc -O2 -I/usr/local/include -L/usr/local/lib -c fab.c 
ar rsv libfabcore.a fab.o
emcc -O2 -I/usr/local/include -L/usr/local/lib -c png_path.c
emcc -O2 png_path.o libfabcore.a libpng.a libgif.a libz.a -o png_path.raw.js --pre-js pre.js
cat header.js png_path.raw.js footer.js > png_path.js

index.html

<!doctype html>
<html>
  <head>
    <title>fileio</title>
  </head>
  <body>
    <input type="file">
    <script src="./png_path.js"></script>
    <script>
      window.onload = function() {
        
        var fileInput = document.querySelector('input');
        
        fileInput.addEventListener('change', function(e) {
          var file = e.target.files[0];
          var reader = new FileReader;
          reader.readAsArrayBuffer(file);
          reader.onload = function() {
            //png_path(INPUT_ARRAY,error(px) diameter(mm) offset(-1) overwrap(0-1) intensity(0-1))
            var res = png_path(new Uint8Array(reader.result),1.1,0.25,1,0.5,0.5);
          };
        }, false);
      };
    </script>
  </body>
</html>

デプロイ先
http://shohei.github.io/emscripten-png-path/