前提・実現したいこと
ここに質問の内容を詳しく書いてください。
画像の編集機能を実装していてcanvas上にユーザーが選択した画像を表示させたいです。
発生している問題・エラーメッセージ
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
該当のソースコード
javascript
1var file = document.querySelector('.sell-upload-drop-file'); 2var canvas = document.getElementById('c1'); 3var canvasWidth = 400; 4var canvasHeight = 300; 5var uploadImgSrc; 6 7// Canvasの準備 8canvas.width = canvasWidth; 9canvas.height = canvasHeight; 10var ctx = canvas.getContext('2d'); 11 12function loadLocalImage(e) { 13 // ファイル情報を取得 14 var fileData = e.target.files[0]; 15 // FileReaderオブジェクトを使ってファイル読み込み 16 var reader = new FileReader(); 17 // ファイル読み込みに成功したときの処理 18 reader.onload = function() { 19 // Canvas上に表示する 20 uploadImgSrc = reader.result; 21 canvasDraw(); 22 } 23 // ファイル読み込みを実行 24 reader.readAsDataURL(fileData); 25} 26 27// ファイルが指定された時にloadLocalImage()を実行 28file.addEventListener('change', loadLocalImage, false); 29 30// Canvas上に画像を表示する 31function canvasDraw(imgSrc) { 32 // canvas内の要素をクリアする 33 ctx.clearRect(0, 0, canvasWidth, canvasHeight); 34 35 // Canvas上に画像を表示 36 var img = new Image(); 37 img.src = uploadImgSrc; 38 img.onload = function() { 39 ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width)); 40 41 // Canvas上にテキストを表示 42 addText(); 43 44 // canvasを画像に変換 45 var data = canvas.toDataURL(); 46 47 // 画像として出力 48 var outputImg = document.createElement('img'); 49 outputImg.src = data; 50 document.getElementById('result').appendChild(outputImg); 51 } 52 }
HTML
1<div class='sell-dropbox-container clearfix'> 2 <div class='have-item-0 sell-upload-items'> 3 <ul> 4 </ul> 5 </div> 6<label for="item_images"><div class='clearfix have-item-0 sell-upload-dropbox'> 7<input class="sell-upload-drop-file" multiple="multiple" style="display: none;" type="file" name="item[images][]" id="item_images" /> 8<pre> 9 ドラッグアンドドロップ 10 またはクリックしてファイルをアップロード 11</pre> 12</div> 13<ul class='has-error-text'> 14</ul> 15</label> 16<section class='modalArea' id='modalArea'> 17 <div class='modalBg' id='modalBg'></div> 18 <div class='modalWrapper'> 19 <div class='modalContents'> 20 <div class='modal-bold'> 21 写真を切りとる 22 </div> 23<a class="disabled" tabindex="-1" href="/"><input class="sell-upload-drop-file" multiple="multiple" style="display: none;" type="file" name="item[images][]" id="item_images" /> 24 <span> 25 写真を変更する 26 </span> 27</a> 28<i class='fas fa-camera'></i> 29</div> 30<div class='sell-crop-editor'> 31<canvas id='c1' style='cursor: grab;'></canvas> 32</div> 33<div class='clearfix'> 34 <li class='cansel-button' id='closeModal'> 35 <a href="/items/new?method=post"> 36 キャンセル 37 </a> 38</li> 39<li class='ok-button'> 40 <a href=""> 41 完了 42 </a>
不明点
reader.readAsDataURL(fileData);の部分が悪いんだとは思うのですがエラー内容が読み解けず撃沈しています。
どなたかこのエラーについてご教授いただきたいです。
補足情報(FW/ツールのバージョンなど)
Ruby on Rails 5.2.1
回答2件
あなたの回答
tips
プレビュー