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

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

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

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

JavaScript

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

解決済

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

takagitoshinari
takagitoshinari

総合スコア0

Ruby on Rails 5

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

JavaScript

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

2回答

0評価

0クリップ

4932閲覧

投稿2019/01/07 05:02

編集2022/01/12 10:58

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
画像の編集機能を実装していてcanvas上にユーザーが選択した画像を表示させたいです。

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

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

該当のソースコード

javascript

var file = document.querySelector('.sell-upload-drop-file'); 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

<div class='sell-dropbox-container clearfix'>  <div class='have-item-0 sell-upload-items'>   <ul>   </ul>  </div> <label for="item_images"><div class='clearfix have-item-0 sell-upload-dropbox'> <input class="sell-upload-drop-file" multiple="multiple" style="display: none;" type="file" name="item[images][]" id="item_images" /> <pre>  ドラッグアンドドロップ  またはクリックしてファイルをアップロード </pre> </div> <ul class='has-error-text'> </ul> </label> <section class='modalArea' id='modalArea'>  <div class='modalBg' id='modalBg'></div>   <div class='modalWrapper'>    <div class='modalContents'>    <div class='modal-bold'>     写真を切りとる    </div> <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" />  <span>   写真を変更する  </span> </a> <i class='fas fa-camera'></i> </div> <div class='sell-crop-editor'> <canvas id='c1' style='cursor: grab;'></canvas> </div> <div class='clearfix'>  <li class='cansel-button' id='closeModal'>  <a href="/items/new?method=post">   キャンセル  </a> </li> <li class='ok-button'>  <a href="">   完了  </a>

不明点

reader.readAsDataURL(fileData);の部分が悪いんだとは思うのですがエラー内容が読み解けず撃沈しています。
どなたかこのエラーについてご教授いただきたいです。

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

Ruby on Rails 5.2.1

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

m.ts10806
m.ts10806

2019/01/07 05:13

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

2019/01/07 05:20

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

2019/01/07 05:21

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

2019/01/07 05:30

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

2019/01/07 05:42

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

2019/01/07 05:42

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

2019/01/07 05:53

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

2019/01/07 05:59

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

2019/01/07 06:00

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

2019/01/07 06:08

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

2019/01/07 06:36

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

2019/01/07 06:40

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

2019/01/07 06:49

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

2019/01/07 06:59

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

2019/01/07 07:02

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

2019/01/07 07:16

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

2019/01/07 07:19

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

2019/01/07 07:20

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

2019/01/07 07:21

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

2019/01/07 07:30

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

2019/01/07 07:32

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

2019/01/07 07:35 編集

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

2019/01/07 07:36

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

2019/01/07 07:42

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Ruby on Rails 5

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

JavaScript

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