jQueryからjavascriptへの書き換え

Question

javascript初心者です。
jQueryを素のjavascriptに書き換えてみようとしたのですが、失敗しました。
コンソールログにも何も出てこなく、どうしたら分かるか、
どこが違うか、どのように書けば良いかなど、一部だけでもご教示いただけますと勉強になります。
よろしくお願いいたします。

html

<div style="width: 500px">
  <form enctype="multipart/form-data" method="post">
    <input type="file" name="userfile" accept="image/*" onChange="imgInput">
  </form>
</div>

javascript

// profile
var file = null; // 選択されるファイル
var blob = null; // 画像(BLOBデータ)
const THUMBNAIL_WIDTH = 500; // 画像リサイズ後の横の長さの最大値
const THUMBNAIL_HEIGHT = 500; // 画像リサイズ後の縦の長さの最大値

// ファイルが選択されたら
function imgInput() {
  // ファイルを取得
  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() {
      if(image.width > image.height){
        // 横長の画像は横のサイズを指定値にあわせる
        var ratio = image.height/image.width;
        var width = THUMBNAIL_WIDTH;
        var height = THUMBNAIL_WIDTH * ratio;
      } else {
        // 縦長の画像は縦のサイズを指定値にあわせる
        var ratio = image.width/image.height;
        var width = THUMBNAIL_HEIGHT * ratio;
        var height = THUMBNAIL_HEIGHT;
      }
      // サムネ描画用canvasのサイズを上で算出した値に変更
      var canvas = document.getElementById('canvas');
      canvas.setAttribute('width', width);
      canvas.setAttribute('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);
      }
    }
  }
}

元html

<div style="width: 500px">
  <form enctype="multipart/form-data" method="post">
    <input type="file" name="userfile" accept="image/*">
  </form>
</div>

元jQuery

$('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);

      }
    }
  }
});

Comments

[m.ts10806]

どう詰まったのか分かりません。ほとんど進んでいないような？
「少しだけやったからあとはやってくれ」という作業依頼でしょうか？
きちんと質問にしてください。

[marion]

自分の書いてみたコードを追加しました。
1つずつ調べて分かる限り違いそうな箇所は直してはみたものの、おそらくボロボロだと思いますので、宜しければ一箇所でも違うところでしたり変換するのに参考になる何かでも構いませんのでご教示いただけましたら幸いです。

[m.ts10806]

元と同じ動作が一通り確認できているかも追記願います。

[m.ts10806]

あ、できてないってことですね。了解です。

[marion]

動作しないので質問させていただきました。

[marion]

入れ違いでしたね、見てくださりありがとうございます。

[date]

閉じかっこの数が合わないのはこの上に何か別な処理がありますか?
なければ、SyntaxError: expected expression, got '}'とでますが

[marion]

別の処理が書いてあったのですが、削った際に残ってしまいました。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('[type=file]').addEventListener('change',function(e){
    var file = e.target.files[0];
    var type=file.type;
    var blob=new Blob([file],{type:type});
    var url = window.URL || window.webkitURL;
    var image = new Image();
    var ratio,width,height;
    image.src = url.createObjectURL(blob);
    image.onload=function(e){
      const THUMBNAIL_WIDTH = 500;
      const THUMBNAIL_HEIGHT = 500;
      if(image.width > image.height){
        ratio = image.height/image.width;
        width = THUMBNAIL_WIDTH;
        height = parseInt(THUMBNAIL_WIDTH * ratio);
      } else {
        ratio = image.width/image.height;
        width = parseInt(THUMBNAIL_HEIGHT * ratio);
        height = THUMBNAIL_HEIGHT;
      }
      var canvas = document.querySelector('#canvas');
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      console.log(canvas);
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0,0,width,height);
      ctx.drawImage(image,0,0,image.width,image.height,0,0,width,height);
    }
  });
});
</script>
<div style="width: 500px">
<form enctype="multipart/form-data" method="post">
<input type="file" name="userfile" accept="image/*">
</form>
<canvas id="canvas"></canvas>
</div>

Comments

[yambejp]

image処理ならfilereaderなしに読み込めますよね

[marion]

filereaderなしで読み込む方法ご教示くださりありがとうございます。
上記ソースコードで動きました。
元のソースといただいたものを見比べて頑張ってみます。ありがとうございます！

Answer 2

元のJQueryの段階でおかしいので、どう修正しても動かないかと思います。(閉じ括弧}が多い、FileReaderをnewしてonloadは設定しているが、使用していない、HTMLにはないcanvasが出てくる)

非JQueryの方ですが、
・閉じ括弧が一つ多い
・onChangeで関数を呼び出せていない（関数呼び出しのためには丸括弧()が必要です）
→onChange="imgInput()"などとする必要があります。この時、任意のパラメータを渡すことができます。(おすすめは="imgInput(this)")
・JQueryの関数propが使用されている
→someJQueryObject.prop("AnyPropery")はsomeDOMObject.AnyPropertyとすることができるはずです。

Comments

[marion]

おすすめ教えていただきありがとうございます。someDOMObjectと併せて調べてみます。ありがとうございます。

[marion]

大変迷ったのですが、今回は勉強が目的だったので、問題点・おすすめをくださったmoredeepさんをベストアンサーとさせていただきました。
皆様ありがとうございました。

Answer 3

コンソールにログが出てない
というならログが出るようにする
例えば
file = this.prop('files')[0];
の後に
console.log(file)
を入れてちゃんとfileが取れているか確認する
コンソールにエラーが出るだけ確認ではなくちゃんとデータがとれているかのログを出力して確認しながら作るようにしてみて下さい

Comments

[marion]

それぞれコンソールログで確認するようにしたら進みました。初歩的なことでお恥ずかしいですが、教えていただけて良かったです。ありがとうございます。

Answer 4

if (file.type == 'image/jpeg', file.type == 'image/png') {
}

という部分がjQueryのコードと違っています。
カンマ演算子は最後の条件を返しますので、この書き方だと、png画像はアップロードできないのではないでしょうか？

Comments

[marion]

if (file.type == 'image/jpeg'||file.type == 'image/png') {
}
にしてみました。ありがとうございました。