#前提・実現したいこと
Rails 5 でユーザー投稿型サービスを開発しています。
投稿作成画面で、ユーザーが選択した画像を自由にトリミングした上で投稿できるようにしたいです。
投稿された画像はCloudinaryを使用してアップされ、AWSに保存されるようになっています。
#発生している問題
Cropper.jsを使用して、投稿作成のビューに、選択した画像を表示させ、自由にトリミング範囲を選択できるところまではうまくいったのですが、そこからトリミングされた画像データをどうやってコントローラに渡せばいいのか分からず悩んでいます。
#該当のソースコード
ビュー
Ruby
1#new.html.erb 2 3<head> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 5 </head> 6 7 8<div class="main posts-new"> 9 <div class="container"> 10 11 <h1 class="form-heading">新規投稿</h1> 12 13 <form> 14 <div class="form"> 15 <div class="form-body"> 16 17 <% @post.errors.full_messages.each do |message| %> 18 <div class="form-error"> 19 <%= message %> 20 </div> 21 <% end %> 22 23 <%= form_for @post, :url => { :controller => :posts, :action => :create } do |f|%> 24 <%= f.label("アイテム画像(必須)") %> 25 <%= f.file_field :image_name, multiple: true , :id => "upload"%> 26 <div class="preview"><img id="crop_img" /></div> 27 <div class="clear_float"></div> 28 29 <%= f.hidden_field :designer_id, :value => @current_user.id %> 30 <div class="clear_float"></div> 31 32 <%= f.label("コメント") %> 33 <%= f.text_area :detail %> 34 35 <%= f.submit("投稿", :id => "submit") %> 36 <% end %> 37 38 </div> 39 </div> 40 </form> 41 </div> 42 43 <%= stylesheet_link_tag 'cropper.min.css' %> 44 <%= javascript_include_tag 'cropper.min.js' %> 45 <%= javascript_include_tag 'crop_image.js' %> 46</div> 47
JavaScript
javascript
1//crop_image.js 2 3$(function(){ 4 $("#upload").change(function(e) { 5 var file = e.target.files[0], 6 reader = new FileReader(), 7 $preview = $(".preview"); 8 t = this; 9 10 if(file.type.indexOf("image") < 0){ 11 return false; 12 } 13 14 reader.onload = (function(file) { 15 return function(e) { 16 $preview.empty(); 17 18 $preview.append($('<img>').attr({ 19 src: e.target.result, 20 id: "crop_img", 21 title: file.name 22 })); 23 24 $('#crop_img').cropper({ 25 }); 26 }; 27 })(file); 28 29 reader.readAsDataURL(file); 30 }); 31}); 32 33$(function(){ 34 $('#submit').on('click', function(){ 35 36 //ボタンがクリックされた時に、トリミングされた画像をControllerに渡す処理を記述したい 37 38}); 39}); 40
Controller
Ruby
1class PostsController < ApplicationController 2 before_action :authenticate_user, {only: [:comment]} 3 before_action :ensure_correct_user, {only: [:edit, :update, :destroy]} 4 before_action :authenticate_designer, {only: [:new, :create, :edit, :update, :destroy]} 5 6 ... 7 def create 8 post = params.require(:post).permit( 9 :designer_id, 10 {image_name: []}, 11 :detail 12 ) 13 @post = Post.new(post) 14 if @post.save 15 flash[:notice]="投稿しました" 16 redirect_to("/") 17 NotificationMailer.post_email(@current_user, @post).deliver 18 else 19 render("posts/new") 20 end 21 end 22... 23 24end 25
#使用している環境
Rails 5.1.5
carrierwaves 1.2.2
Cropper.js
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/27 18:31
2018/03/27 21:13