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

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

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

takagitoshinari
takagitoshinari

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

1250閲覧

投稿2019/01/06 08:32

前提・実現したいこと

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

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

Uncaught TypeError: Cannot read property 'addEventListener' of null

該当のソースコード

html

%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 '完了', ""

jquery

$(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/ツールのバージョンなど)

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

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

bochan2
bochan2

2019/01/06 10:03

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

2019/01/06 10:19

ありがとうございます!変更させていただきます
m.ts10806
m.ts10806

2019/01/07 01:51

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。