#前提・実現したいこと
Rails5で開発をしています。
以下の記事や以前いただいた回答を参考に、ビューでユーザーがトリミングした画像をアップロードできる機能を実装中です。
canvasの画像をtoDataURL()を使ってRailsのcarrierwaveで保存するまで
Canvasで描画した画像を送信してサーバに保存する
#発生している問題
トリミング済みの画像データを、toDataURL()を使ってサーバーサイドに送っても、そこからCarrierwaveにアップすることができません。
結果として、作成されたPostインスタンスのimage_nameメンバがnilになってしまいます。
何卒お力添えをお願いします。
#該当のソースコード
ruby
1class PostsController < ApplicationController 2... 3 def new 4 @post = Post.new 5 end 6 7 def create 8 post = params.require(:post).permit( 9 :designer_id, 10 :image_name, 11 :remote_image_url, 12 :detail 13 ) 14 post[:image_name]= post[:remote_image_url] 15 post[:remote_image_url] = "" #この段階でpostには全て適切な値が入っています 16 @post = Post.new(post) 17 if @post.save #しかし、ここで@postのimage_nameがnilになってしまいます。 18 ... 19 end 20 end 21 22 ... 23end
carrierwaveは、carrierwave-base64と言うgemを使用して、base64を受け取れるようにしています。
Ruby
1class Post < ApplicationRecord 2 mount_base64_uploader :image_name, ItemImageUploader 3 attr_accessor :remote_image_url 4 5 validates :image_name, {presence: true} 6 ... 7end
クライアントサイドは以下のように処理し、サーバー側でimage_nameとremote_image_urlをスワップしています。
javascript
1$('#_submit').on('click', function(){ 2 var canvas = $('#crop_img').cropper('getCroppedCanvas'); 3 var canvas_data = canvas.toDataURL().replace(/^.*,/, ''); 4 5 $("#post_image_name").val(""); //画像データを二重に送信するのを防ぐ 6 $("#post_remote_image_url").val(canvas_data); 7 $("#myform").submit(); 8 9});
#試してみたこと
以下のような、base64で保存する他の方法も試してみましたが、同様にcarrierwaveがうまく動作せず、image_nameがnilになってしまいます。
shrikanthkr/carrierwave-base64.md
timsly /carrierwave-data-uri
#使用している環境
Ruby on Rails 5
Carrierwave
carrierwave-base64
トリミングにはcropper.jsを使用しています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。