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

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

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

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

799閲覧

Railsで画像データをダウンロードしたい

hokosugi

総合スコア63

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/09/28 21:33

編集2018/09/29 02:02

前提・実現したいこと

webRTCで撮影した画像をcanvasに渡してblobオブジェクトに変換後、FormDataに追加して
ajaxでデータ送信してpublic/uploadsディレクトリにダウンロードしようとしています。

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

undefined method `read' for nil:NilClass

と叱られました。自信ないのですが、クラス継承したオブジェクトの中身がないのでreadメソッド
が効きませんよということなのではと思っています。

該当のソースコード

javascript

1$('#save-button').click(function(){ 2 var canvas = document.getElementById('canvas'); 3 4 var url = canvas.toDataURL('image/jpeg'); 5 // base64データをblobに変換 6 var blob = dataURLtoBlob(url); 7 8 var fd = new FormData(); 9 10 fd.append("image", blob); 11 12 13 $.ajax({ 14 //url: "/headlines", 15 type: "POST", 16 data: fd, 17 processData: false, 18 contentType: false, 19 }); 20 // テキスト形式からURLオブジェクトに変換 21 // var urlfromblob = URL.createObjectURL(blob); 22 // alert(urlfromblob) 23 // hdle_id = "10" 24 alert(blob.size); 25 $("#picture_image_url").val(""); 26 $("#picture_image_url").val(url); 27 $("#picture_blobpic").val(""); 28 $("#picture_blobpic").val(blob); 29 $("#new_picture").submit();

controller

1def create 2 3 @picture = Picture.new(picture_params) 4 @picture.image_url = params['picture']['image_url'] 5 # binding.pry 6 @picture.headline_id = params['picture']['headline_id'] 7 @picture.blobpic = params['picture']['blobpic'] 8 if @picture.save 9 redirect_to headlines_path, notice: '保存しました。' 10 else 11 render :index 12 end 13 File.open("#{Rails.root}/public/uploads/sample.jpeg", 'wb') do |f| 14 f.write(params[:file].read) 15 end 16 end

試したこと・自分なりの理解

このサイト[Canvas Images and Rails]をほぼコピペしています。
コントローラーのダウンロード(File.open以下)でajaxで送信された画像データがparams[:file]に渡っていない
と考えます。
params[:file]をparams[:image]に変えても同じエラーが出ます。
変数blobは[object blob]が入っていることは確認、但し、中身を確認出来ない。
javascriptでajaxの引数url:をデフォルトにして現ページをデータ送信先にした。
実行後、空のsample.jpegが当ディレクトリに作成されている。

よろしくおねがいします

初心者でちょっと無理なことしているなとは思っていますが、なんとか突破したいと投稿しました。
よろしくおねがいします。

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

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

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

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

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

m.ts10806

2018/09/28 21:37

Rails環境なく知識もあるわけではないので具体的な回答はできないのですが、下記気になりましたので、質問を調整願います。
m.ts10806

2018/09/28 21:37

1:「コピペしました」のであれば、コピペ元の記事などをリンクで提示してください。
m.ts10806

2018/09/28 21:38

2:「ダメだった」「うまくいかない」では何が起きているかわかりませんので、試した結果何が起きたのかを具体的に記載してください。
m.ts10806

2018/09/28 21:38

3:Ajaxで結果を何も受け取っていないように見受けられますが、これはどのような意図があってのことでしょうか?
hokosugi

2018/09/29 00:55

ご指摘を頂きありがとうございます。 後ほど訂正したいと思います。リンクについては「ここ」に貼り付けていますので確認できます。
hokosugi

2018/09/29 01:54

Ajaxで結果を受け取っている、いない含めて質問しています。かなりアヤフヤですが、自分の理解では結果を受け取るとは送信先のurlかコメントアウトになっていることと判断しました。これはリファレンスにurlの初期値が現ページとあったのでそれで試してみたということです。理解が不十分で質問力もなく見当違いなことを書いているかも知れませんがは兎も角動かしてみたい一心で質問していますのでご理解ください。
m.ts10806

2018/09/29 01:56

細かいですが「ここ」など短い文言だと気づかない可能性が高いです(私も見落としてました・・・)具体的な記事の名称とかカッコでくくるなど見やすい工夫をお願いします。※私はよくリスト表示を使います。 - [記事のタイトル](URL)
hokosugi

2018/09/29 02:03

返信ありがとうございます。参考にして変更しました。
guest

回答2

0

コメントにも書きましたが、Rails環境がないため試してもらいたいレベルなのですが、
params['picture'] としていますが、ajax側でセットしているのはimageという名前なので、params['image']ではないでしょうか。

Ajaxも入力フォームの送信と同じくname=>valueの形式で値が送られるので、
送信する側と受信する側のnameは合わせないといけないはずです。

また、Ajax通信は何かしらで通信が正常にいかないこともありますので、
成功・失敗は取得するようにされたほうが良いです。

例:

js

1$.ajax({ 2//省略 3}).done(function(data, status, xhr) { 4 if(status === "success"){ 5 //通信成功時 6 7 }else{ 8 console.log(status); 9 console.log(xhr); 10 } 11}).fail(function(xhr, status, error) { 12 console.log(xhr); 13}); 14

投稿2018/09/29 02:11

m.ts10806

総合スコア80765

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

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

hokosugi

2018/09/29 02:34

返信ありがとうございます。手元に携帯しかなくすぐに試す環境と違いますので帰宅後にやってみたいと思います。取り急ぎお礼まで。
guest

0

自己解決

根本的な解決ではありませんが、他の方法でダウンロード出来るようになりましたので掲げておきます。

railsのform_forヘルパーでajaxを利用するのならremote => trueを指定するだけで良いそうです。

<%= form_for(@picture, url: headline_pictures_path, remote: true) do |f| %>

そして、このサイトCanvas Images and RailsのStrategy 1を採用して

image_data = Base64.decode64(data['data:image/jpeg;base64,'.length .. -1])

とcanvasのtodataurlでエンコードされたdataを(data:image/png;base64)を除外してデコードしてFile.openしたらダウンロードできました。

なぜblobからダウンロード出来ないかは謎のままなので御知りの方あれば教えてください。

投稿2018/09/29 22:56

hokosugi

総合スコア63

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

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

m.ts10806

2018/09/29 23:26

もしかしたら外してるかもしれませんが言ってしまえばblobはデータ実体ではなくバイナリデータだからではないかなと。 ダウンロードするにはファイル実体でないといけないので、そこからプログラムなりブラウザが解釈できる形式、ファイル実体に変換してあげないといけないように思います。
hokosugi

2018/09/29 23:44

そうなんです。javascriptのFormDataがその変換メソッド(read等)を効かせるオブジェクトだと思っていたんですが中々上手く行かなくて・・・。もう少し勉強してみます。 今回は色々教えていただきありがとうございます。
m.ts10806

2018/09/29 23:49

Objectって何でも取り込み可能ですが具体的な型ではないですから、そのあたりがネックになっているようにも思います。
hokosugi

2018/09/29 23:53 編集

なるほど、勉強になります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問