前提・実現したいこと
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー