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

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

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

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2338閲覧

[Rails5] Cropper.jsを使ってユーザーが画像を自由にトリミング・アップロードできるようにしたい

tacro

総合スコア23

Ruby on Rails 5

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/03/27 02:48

#前提・実現したいこと

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

getCroppedCanvasメソッドでHTMLCanvasElementが採れるから, ここからtoDataURLなりtoBlobメソッドを使って切り取り済みの画像を取り出してフォーム送信すればよさそう.

投稿2018/03/27 03:20

defghi1977

総合スコア4756

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

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

defghi1977

2018/03/27 21:13

一般的なバイナリデータのアップロード手法で可能ですから, あとはお好きなようにとしか言いようがありません.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問