前提・実現したいこと
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が当ディレクトリに作成されている。
よろしくおねがいします
初心者でちょっと無理なことしているなとは思っていますが、なんとか突破したいと投稿しました。
よろしくおねがいします。
回答2件
あなたの回答
tips
プレビュー