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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Q&A

解決済

2回答

7197閲覧

Uncaught TypeError: Failed to execute 〜〜〜parameter 1 is not of type 'Blob'.

takagitoshinari

総合スコア24

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

0グッド

0クリップ

投稿2019/01/07 05:02

編集2019/01/07 07:41

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
画像の編集機能を実装していて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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/07 05:13

fileDataをconsole.log()で確認するとどうなってますか?Blob型でないと適用できないので、型が違う情報なのではないかと思います。 http://e-words.jp/w/BLOB.html
takagitoshinari

2019/01/07 05:20

console.log(fileData);で調べたところ"undefind"でした。これは型が原因なのでしょうか?
m.ts10806

2019/01/07 05:21

どこで書いたか分からないですが、そもそもデータ取得できてないようですね。 再現確認のためにHTMLもご提示ください。
takagitoshinari

2019/01/07 05:30

HTMLを記載させていただきました!
yambejp

2019/01/07 05:42

HTMLが見当たりませんが?
m.ts10806

2019/01/07 05:42

編集できていないようです。
takagitoshinari

2019/01/07 05:53

すみませんでした!編集完了しました
m.ts10806

2019/01/07 05:59

これはHTMLというより何かのフレームワークのVIEWファイルですよね。 ブラウザから「ソースを表示」を行った情報を提示されたほうがより多くの人が再現確認できます。
m.ts10806

2019/01/07 06:00

それか、そのフレームワークの情報、バージョンなどの環境情報をご提示ください。
takagitoshinari

2019/01/07 06:08

すみません勘違いしていました。 現在、Sublimetextを使っています version 3.1.1、build3176です
m.ts10806

2019/01/07 06:36

それはテキストエディタであって言語ではないですよね。「HTML」で提示された内容は何のプログラミング言語でしょうか。
takagitoshinari

2019/01/07 06:40

Ruby on Rails です。 ご迷惑おかけして申し訳ありません!
m.ts10806

2019/01/07 06:49

タグおよび環境情報として質問本文に追記願います。単純にhtmlでない場合、再現確認を行うには環境が手元にないといけません。 単純にhtmlなどクライアントだけの対応にしたいのであればブラウザから実行して「ソースを表示」した際のhtmlソースをご提示ください
takagitoshinari

2019/01/07 06:59

ご迷惑をおかけして申し訳ありません ソースを表示するからHTMLを持ってきました!
m.ts10806

2019/01/07 07:02

コード提示部分がマークダウンミスってるので修正してもらえたらと。 私の方は特に迷惑と思ってないので淡々と回答に必要な情報を提示してもらえたらそれで良いです
takagitoshinari

2019/01/07 07:16

ありがとうございます! マークダウン記法で書かせていただきました!
takagitoshinari

2019/01/07 07:19

編集できてなかったのでやり直します
m.ts10806

2019/01/07 07:20

プレビューが表示されてるはずなので落ち着いてそちらを確認して調整してください
m.ts10806

2019/01/07 07:21

あと、タグの追加、環境情報(言語、フレームワーク)の追記ですね
takagitoshinari

2019/01/07 07:30

タグ追加、環境情報は完了しました! HTMLはおかしいでしょうか?
m.ts10806

2019/01/07 07:32

結果を見てみれば明らかですね。→HTMLのマークダウン <a href=""> 完了 </a> ``` ↑ここにバッククォート3つ追加するだけで良いはずですが。 タグに必要なのはHTMLよりもRuby、Railsですね。
m.ts10806

2019/01/07 07:35 編集

ただ、HTMLも結構半端な提示のされ方をしているような。 </div>や</label>はあるけど開始タグがなかったり。 開始タグはあっても閉じタグがなかったり。
m.ts10806

2019/01/07 07:36

JavaScriptのコードにもSyntaxエラー出てますね・・・。
takagitoshinari

2019/01/07 07:42

修正しました。いかがでしょうか?
guest

回答2

0

ベストアンサー

canvasDrawに引数をあたえてないですが大丈夫ですか?

ここまでは動きますよね?

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#f1').addEventListener('change',function(e){ 4 var fileData=e.target.files[0]; 5 var reader = new FileReader(); 6 reader.onload = function() { 7 uploadImgSrc = reader.result; 8 console.log(uploadImgSrc); 9 } 10 reader.readAsDataURL(fileData); 11 }); 12}); 13</script> 14<input type="file" id="f1">

投稿2019/01/07 05:49

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

var fileData = e.target.files[0];

var fileData = this.files[0];
に変更するとどうでしょうか?

投稿2019/01/07 05:34

runny_nose

総合スコア280

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takagitoshinari

2019/01/07 05:38

試してみましたが同じエラー文が表示されました(T . T)
runny_nose

2019/01/07 06:42

試してみたのですが、提示されているコードで特にそのようなエラーはおきませんでした。 ↓CodePenにそのまま転記してみたのですが、質問者さんの環境で動作しますか? https://codepen.io/anon/pen/REyjVp?editors=1111
takagitoshinari

2019/01/07 06:56

https://i.gyazo.com/baad109ff470c3ce92fef5344e6a337d.mp4 上記はGIFなのですが現在練習でメルカリもどきを作っています。実装したい箇所は編集を押すとモーダルが出てきてモーダルのcanvas上にユーザーが選択した画像が出るといった仕様にしたいです。 ファイルを選択するというボタンを選ばないのでCodePenに書いていただいたコードであれば動作します。 長文になってしまい申し訳ありません!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問