<input type="file">でアップした複数画像に圧縮をかけたい

前提・実現したいこと

<input type="file" multiple>を使ってアップした複数画像に圧縮をかけたい。

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

複数画像にしない場合(<input type="file">)ではうまく動作するのですが、<input type="file" multiple>にして複数画像にするとうまく動作させることができません。

該当のソースコード

これが単発画像でうまくいくパターンです。

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

        console.log(base64);


      }
      image.src = e.target.result;

    }
    reader.readAsDataURL(file);
  });


});
</script>

これが複数画像でうまく動作しません。

<!-- ファイル選択ボタン -->
<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;
    }
	  
   for (i = 0; i < this.files.length; i++) {

    // 画像をリサイズする
    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[i].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[i].toDataURL('image/jpeg');
        console.log(base64);

      }
      image.src = e.target.result;

    }
    reader.readAsDataURL(this.files[i]);
		
   }
  });


});

	
</script>

試したこと

forをつかってみたのですが、何が間違っているのでしょうか？
ご教授頂ければ幸いです。

m.ts10806

2021/05/26 02:33

コードはマークダウンのcode機能にてご提示ください。あと、質問タグに「Java」のみしかありませんが、どこにもJavaの話がないです。コードからするとJavaScriptでは。

yambejp

2021/05/26 02:39

canvasは一つしかないですよね？複数の画像をどうしたいのですか？

yuta8878

2021/05/26 02:44 編集

canvasを複数に対応させないといけないんですね... 圧縮をかけた複数画像をBubbleというのノーコードツールのデータベースに登録させたいです。 bubble_fn_base64_images(base64); こんな感じのコードを追加するとDBには登録できるのですが、1枚しか取得できなくて困っています。