Electronを使ってネイティブアプリで画像を登録+保存する方法を紹介します。
実装する方法としては、
画像を登録: HTMLのinputタグを使って登録
画像を保存: inputタグからファイル情報取得、javascriptのfsモジュールを使用して取得した情報からファイルを読み込み+書き込み
となります。
サンプルコード
・HTML側のコード
|
1 2 3 |
<input type="file" multiple accept="image/png, image/jpg" id="imageupload"> |
・Javascript側のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
const fs = require('fs') $(function () { $('#imageupload').on('change', function (e) { $('#uploadedFileNum').text($(this)[0].files.length); // inputでアップロードされたファイルの情報はFileListとして保持される for (var i=0; i < $(this)[0].files.length; i++) { file = $(this)[0].files[i]; switch (file.type) { case 'image/jpg': filetype = 'jpg'; case 'image/png': default: filetype = 'png'; } filename = Date.now()+'_'+generateRandom(5)+'.'+filetype; fs.writeFileSync( './upload/queryimage/' + filename, fs.readFileSync(file.path, "binary"), 'binary' ); console.log(file); } }); }); function generateRandom(n) { var add = 1, max = 12-add; if (n>max) { return generateRandom(max) + generateRandom(n-max); } max = Math.pow(10, n+add); var min = max/10; // Math.pow(10, n) basically var number = Math.floor(Math.random()*(max-min+1))+min; return (""+number).substring(add); } |
コードの解説
HTML側ではinputタグにtype=”file”などを指定して、アップロードのためのボタンを作成します。id=”imageupload”などのようにして、idを指定することを忘れないでください。
色々CSSなどを適用して、私の場合はこんな感じにしています。
ボタンを押すと、自分のPCから画像を選択できるようになります。
画像の選択が完了するとjavascript側の$(‘#imageupload’).on(‘change’, ….でイベントが発火するようになっています。
そのあとにfor文で選択されたファイル（複数ある場合のあるため）を回していきます。
generateRandom()関数は乱数を生成するための関数で、ファイル名の最後に乱数を付けてあげることでファイル名が重複することを避けています。
