質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.51%

jQueryからjavascriptへの書き換え

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 436

marion

score 12

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);

      }
    }
  }
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • marion

    2019/03/08 07:19

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

    キャンセル

  • date

    2019/03/08 09:44

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

    キャンセル

  • marion

    2019/03/08 20:51

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

    キャンセル

回答 4

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/08 20:57

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

    キャンセル

  • 2019/03/20 17:14

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

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/08 20:53 編集

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

    キャンセル

+2

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/08 20:50

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

    キャンセル

+2

<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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/08 11:08

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

    キャンセル

  • 2019/03/20 17:11

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる