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

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

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

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

JavaScript

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

Q&A

解決済

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

takagitoshinari
takagitoshinari

総合スコア24

HTML5

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

JavaScript

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

1回答

0グッド

0クリップ

1457閲覧

投稿2019/01/06 08:32

前提・実現したいこと

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

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

Uncaught TypeError: Cannot read property 'addEventListener' of null

該当のソースコード

html

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

jquery

1 $(document).on("click", ".sell-upload-edit", function (e) { 2 e.preventDefault(); 3 $('#modalArea').fadeIn(); 4 }); 5 $('#closeModal , #modalBg').click(function(){ 6 $('#modalArea').fadeOut(); 7 }); 8 9 10 11var file = document.getElementById('.sell-upload-dropbox'); 12var canvas = document.getElementById('c1'); 13var canvasWidth = 400; 14var canvasHeight = 300; 15var uploadImgSrc; 16 17// Canvasの準備 18canvas.width = canvasWidth; 19canvas.height = canvasHeight; 20var ctx = canvas.getContext('2d'); 21 22function loadLocalImage(e) { 23 // ファイル情報を取得 24 var fileData = e.target.files[0]; 25 // FileReaderオブジェクトを使ってファイル読み込み 26 var reader = new FileReader(); 27 // ファイル読み込みに成功したときの処理 28 reader.onload = function() { 29 // Canvas上に表示する 30 uploadImgSrc = reader.result; 31 canvasDraw(); 32 } 33 // ファイル読み込みを実行 34 reader.readAsDataURL(fileData); 35} 36 37// ファイルが指定された時にloadLocalImage()を実行 38file.addEventListener('change', loadLocalImage, false); 39 40// Canvas上に画像を表示する 41function canvasDraw(imgSrc) { 42 // canvas内の要素をクリアする 43 ctx.clearRect(0, 0, canvasWidth, canvasHeight); 44 45 // Canvas上に画像を表示 46 var img = new Image(); 47 img.src = uploadImgSrc; 48 img.onload = function() { 49 ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width)); 50 51 // Canvas上にテキストを表示 52 addText(); 53 54 // canvasを画像に変換 55 var data = canvas.toDataURL(); 56 57 // 画像として出力 58 var outputImg = document.createElement('img'); 59 outputImg.src = data; 60 document.getElementById('result').appendChild(outputImg); 61 } 62 } 63});

試したこと

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

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

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

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

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

bochan2

2019/01/06 10:03

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

2019/01/06 10:19

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

2019/01/07 01:51

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

回答1

2

ベストアンサー

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っぽいですね。

投稿2019/01/07 01:52

m.ts10806

総合スコア80374

takagitoshinari, kei344👍を押しています

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

takagitoshinari

2019/01/07 03:11

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

2019/01/07 03:59

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

HTML5

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

JavaScript

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