Multi-File Uploaderって遅くないですか?

配列として認識させようとするとjavascripttobubbleがうまく動作しないっぽいんですよねー。この人の方法を使いました!

この人のこれを使ったらPCでは正しく動作するのですが、スマホでは画像が重すぎるっぽいんですよね。最近のスマホは高画質なので画像の容量が大きすぎるのが問題みたいです。

<script type="text/javascript">
    function readFile() {
        var base64_images = '';
        if (this.files) {
            var file_count = this.files.length;
            for (i = 0; i < this.files.length; i++) {
                var FR = new FileReader();
FR.onload = function(e) {
                    base64_images += e.target.result + '#';
                    if (file_count) {
bubble_fn_base64_images(base64_images);
console.log(base64_images);
                    }
                };
                FR.readAsDataURL(this.files[i]);
            }
        }
    }

    document.getElementById("file-input").addEventListener("change", readFile, false);
</script>

上記のやり方を、下の画像圧縮ができるコードに当てはめれたら完璧になると思うのですが…なかなかうまくできません :cold_sweat:

<!-- ファイル選択ボタン -->
<div style="width: 500px">
  <form enctype="multipart/form-data" method="post">
    <input type="file" name="userfile" accept="image/*" multiple>
  </form>
</div>

<!-- サムネイル表示領域 -->
<canvas id="canvas" width="0" height="0"></canvas>

<!-- アップロード開始ボタン -->
<button class="btn btn-primary" id="upload">投稿</button>

<!-- 以下、javascript -->
<script type="text/javascript">
$(function() {
  var file = null; // 選択されるファイル
  var blob = null; // 画像(BLOBデータ)
  const THUMBNAIL_WIDTH = 800; // 画像リサイズ後の横の長さの最大値
  const THUMBNAIL_HEIGHT = 800; // 画像リサイズ後の縦の長さの最大値

  // ファイルが選択されたら
  $('input[type=file]').change(function() {

    // ファイルを取得
    file = $(this).prop('files')[0];
    // 選択されたファイルが画像かどうか判定
    if (file.type != 'image/jpeg' && file.type != 'image/png') {
      // 画像でない場合は終了
      file = null;
      blob = null;
      return;
    }

    // 画像をリサイズする
    var image = new Image();
    var reader = new FileReader();
    reader.onload = function(e) {
      image.onload = function() {
        var width, height;
        if(image.width > image.height){
          // 横長の画像は横のサイズを指定値にあわせる
          var ratio = image.height/image.width;
          width = THUMBNAIL_WIDTH;
          height = THUMBNAIL_WIDTH * ratio;
        } else {
          // 縦長の画像は縦のサイズを指定値にあわせる
          var ratio = image.width/image.height;
          width = THUMBNAIL_HEIGHT * ratio;
          height = THUMBNAIL_HEIGHT;
        }
        // サムネ描画用canvasのサイズを上で算出した値に変更
        var canvas = $('#canvas')
                     .attr('width', width)
                     .attr('height', height);
        var ctx = canvas[0].getContext('2d');
        // canvasに既に描画されている画像をクリア
        ctx.clearRect(0,0,width,height);
        // canvasにサムネイルを描画

       ctx.drawImage(image,0,0,image.width,image.height,0,0,width,height);

        // canvasからbase64画像データを取得
        var base64 = canvas.get(0).toDataURL('image/jpeg');        
        // base64からBlobデータを作成
        var barr, bin, i, len;
        bin = atob(base64.split('base64,')[1]);
        len = bin.length;
        barr = new Uint8Array(len);
        i = 0;
        while (i < len) {
          barr[i] = bin.charCodeAt(i);
          i++;
        }
        blob = new Blob([barr], {type: 'image/jpeg'});
		  console.log(blob);
		  console.log(base64);
		  bubble_fn_base98_images(base64);

      }
      image.src = e.target.result;

    }
    reader.readAsDataURL(file);
  });


});
</script>