canvas上にローカルの画像を表示させたい

Question

前提・実現したいこと

modalの中にcanvasを使っていてその中にローカルの画像を表示したい。

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

Uncaught TypeError: Cannot read property 'addEventListener' of null

該当のソースコード

%section#modalArea.modalArea
  #modalBg.modalBg
  .modalWrapper
    .modalContents
      .modal-bold 写真を切りとる
      =link_to "/",class: "disabled",tabindex: "-1" do
       =f.file_field :images, class: "sell-upload-drop-file", multiple: true, style: "display: none;"
       %span 写真を変更する
      %i.fas.fa-camera
     .sell-crop-editor
       %canvas{id: "c1", style: "cursor: grab;"}
     .clearfix
       %li#closeModal.cansel-button
         =link_to 'キャンセル',method: :post
       %li.ok-button
         =link_to '完了', ""

 $(document).on("click", ".sell-upload-edit", function (e) {
    e.preventDefault();
    $('#modalArea').fadeIn();
  });
  $('#closeModal , #modalBg').click(function(){
    $('#modalArea').fadeOut();
  });



var file = document.getElementById('.sell-upload-dropbox');
var canvas = document.getElementById('c1');
var canvasWidth = 400;
var canvasHeight = 300;
var uploadImgSrc;

// Canvasの準備
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var ctx = canvas.getContext('2d');

function loadLocalImage(e) {
    // ファイル情報を取得
    var fileData = e.target.files[0];
    // FileReaderオブジェクトを使ってファイル読み込み
    var reader = new FileReader();
    // ファイル読み込みに成功したときの処理
    reader.onload = function() {
        // Canvas上に表示する
        uploadImgSrc = reader.result;
        canvasDraw();
    }
    // ファイル読み込みを実行
    reader.readAsDataURL(fileData);
}

// ファイルが指定された時にloadLocalImage()を実行
file.addEventListener('change', loadLocalImage, false);

// Canvas上に画像を表示する
function canvasDraw(imgSrc) {
    // canvas内の要素をクリアする
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    // Canvas上に画像を表示
    var img = new Image();
    img.src = uploadImgSrc;
    img.onload = function() {
        ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width));

        // Canvas上にテキストを表示
        addText();

        // canvasを画像に変換
        var data = canvas.toDataURL();

        // 画像として出力
        var outputImg = document.createElement('img');
        outputImg.src = data;
        document.getElementById('result').appendChild(outputImg);
    }
  }
});

試したこと

htmlが読まれていないことが原因だと思いjsファイルの変数'file'で指定しているクラス名を変え続けていたのですが効果なしでした。何が原因なのかもよくわからなくなってしまい相談させていただきました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[bochan2]

質問いただきありがとうございます！
質問のタイトルは"AddEventLinsterでNullPointerException"の方が適切だと思います

[takagitoshinari]

ありがとうございます！変更させていただきます

[m.ts10806]

bochan2さん　エラーメッセージが提示されているのになぜそのような変更が必要なのでしょうか。起きていないことを書くのは不適切ですよ。

Answer 1

html部分がHTMLコードとしてではなく、何かのフレームワークで提示されているので確実なことは言えませんが、

var file = document.getElementById('.sell-upload-dropbox');

これだとid=".sell-upload-dropbox"という属性と属性値がついているElementを取得しようとしています。
classであれば　Document.getElementsByClassName()
ですし、getElementById()でid="sell-upload-dropbox"を取得したいのであれば「.」は不要です。
※前者である場合はgetElementsというところを注意してくださいね。

いずれにしても「HTML」とされている部分にsell-upload-dropboxがないようです。sell-upload-drop-fileでは？
だとしたら取得するのはidではなくclassっぽいですね。

Comments

[takagitoshinari]

エラー解消しました！ものすごく助かりました。ありがとうございました！

[m.ts10806]

解決されたようで何よりです