Cannot read property 'getContext' of null の原因がわからない

前提・実現したいこと

capture属性を含めたinputタグで画像をアップロードし、その画像を正方形かつ250×250のサイズに縮小して画面に表示させたいです。

JavaScriptは、npm run devでコンパイルしたものを使用しています。

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

Uncaught TypeError: Cannot read property 'getContext' of null
    at Object../resources/js/script2.js (script2.js:99)
    at __webpack_require__ (script2.js:20)
    at Object.2 (script2.js:144)
    at __webpack_require__ (script2.js:20)
    at script2.js:84
    at script2.js:87

該当のソースコード

<!-- HTMLのソースコード -->

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="{{ asset('css/style.css') }}">
  <title>カメラ サンプル</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
  <h2>カメラサンプル2</h2>
  <form id="image_form" action="{{ url('/') }}" method="post">
     @csrf
     <canvas id="display" width="250" height="250" style="background-color: #000"></canvas>
     <input id="input_image" type="file" name="image_image" accept="image/*" capture>
     <input id="submit_image" type="submit" name="submit_image" value="送信">
  </form>
  <script src="{{ asset('js/script2.js') }}"></script>
</body>
</html>

// jsのソースコード（コンパイル前）

var input_image = document.getElementById('input_image');
var ctx = document.getElementById('display').getContext('2d');
var canvas_width = 250;
var canvas_height = 250;

input_image.addEventListener('charge', () => {
	var file = this.files[0];
	var image = new Image();
	var reader = new FileReader();

	reader.onloadend = function() {
	    image.onload = function() {
			var image_width = image.naturalWidth;
			var image_height = image.naturalHeight;

			// 縮小比の計算
			var scale = 1.0;
			if ( (image_width/image_height) > (canvas_width/canvas_height) ) {
				scale = canvas_height / image_height;
			} else {
				scale = canvas_width / image_width;
			}

			// 元画像の切り出し領域の計算
			var clip_width = canvas_width / scale;
			var clip_height = canvas_height / scale;
			var clip_x = (image_width - clip_width) / 2;
			var clip_y = (image_height - clip_height) / 2;

			ctx.clearRect(0, 0, canvas_width, canvas_height);
			ctx.drawImage(image, clip_x, clip_y, clip_width, clip_height, 0, 0, canvas_width, canvas_height);
		}
	    image.src = reader.result;
	}
	reader.readAsDataURL(file);
}, false);

試したこと

原因を調べたところ、
・canvasタグにidが設定されていない
・canvasタグの前でスクリプトを呼び出している

が原因だと書いてあったのですが、どちらも今回のケースに当てはまらず、わからないので質問させていただきました。

以上、宜しくお願い致します。

yuuyu

2020/07/06 01:45

一応確認ですが、「console.log(document.getElementById('display'))」を該当箇所付近で実行した場合、要素は取得できていますか？

YakumoSaki

2020/07/06 02:05

手元のfirefoxとchromeで試した範囲では、ご提示頂いたコードのgetContextは成功しました。 `var ctx = document.getElementById('display').getContext('2d');` の getContext() が null にないということは、 `getElementById` が失敗しているということなのでレンダリングされたHTML中に本当にID=display が存在するのかご確認いただいたほうがよいかもしれません。ブラウザの検証ツール(F12キー) のコンソールで問題の行を実行してみるのもよさそうです。本件とは無関係ですが、 change が charge にtypoしているように見えます `input_image.addEventListener('charge', () => {`