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

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回答

740閲覧

[Rails] Cropper.jsから得た値をもとに、CarrierWave上で画像をトリミングしたい

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グッド

0クリップ

投稿2018/03/28 05:49

編集2018/03/28 18:10

#前提・実現したいこと
Rails 5 でユーザー投稿型サービスを開発しています。
投稿作成画面で、ユーザーが画像を自由に選択しトリミングした上で投稿できるようにしたいです。
以下の記事を参考に作っています。
CarrierwaveとMiniMagickでユーザー任意の入力値で画像をトリミングする
Upload image crop with Ruby and Rails, CarrierWave and Cropper.js

#発生している問題
投稿は作成されるのですが、画像がトリミングされず、もとのままアップされてしまいます。
フロントからデータの送信は無事にされているので、アップローダ内のcropメソッドに不備があるのだと思いますが、はっきりと分からず困っています…

#該当のソースコード
サーバーサイド

javascript

1 ... 2 $('#_submit').on('click', function(){ 3 // crop のデータを取得 4 var data = $('#crop_img').cropper('getData'); 5 $("#post_image_x").val(Math.round(data.x)); 6 $("#post_image_y").val(Math.round(data.y)); 7 $("#post_image_w").val(Math.round(data.width)); 8 $("#post_image_h").val(Math.round(data.height)); 9 $("#myform").submit(); 10}); 11

Ruby

1class ItemImageUploader < CarrierWave::Uploader::Base 2 3 include CarrierWave::RMagick 4 include CarrierWave::MiniMagick 5 process :convert => 'jpg' 6 7 version :standard do 8 process :crop 9 process :resize_to_fill=> [570, 852, gravity = 'Center'] 10 end 11 12 # Choose what kind of storage to use for this uploader: 13 if Rails.env.development? 14 storage :file 15 elsif Rails.env.test? 16 storage :file 17 else 18 storage :fog 19 end 20 21 22 def store_dir 23 "post_images/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" 24 end 25 26 version :thumb do 27 process :crop 28 process :resize_to_fill=>[380, 568, gravity = 'Center'] 29 end 30 31 def extension_whitelist 32 %w(jpg jpeg gif png) 33 end 34 35 def crop 36 return if [model.image_x, model.image_y, model.image_w, model.image_h].all? 37 manipulate! do |img| 38 crop_x = model.image_x.to_i 39 crop_y = model.image_y.to_i 40 crop_w = model.image_w.to_i 41 crop_h = model.image_h.to_i 42 img.crop([[crop_w, crop_h].join('x'), [crop_x, crop_y].join('+')].join('+')) 43 img = yield(img) if block_given? 44 img 45 end 46 end 47 48 # Override the filename of the uploaded files: 49 # Avoid using model.id or version_name here, see uploader/store.rb for details. 50 def filename 51 "#{secure_token}.jpg" if original_filename.present? 52 end 53 54 protected 55 def secure_token 56 var = :"@#{mounted_as}_secure_token" 57 model.instance_variable_get(var) or model.instance_variable_set(var, SecureRandom.uuid) 58 end 59 end

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 :image_x, 12 :image_y, 13 :image_w, 14 :image_h, 15 :detail 16 ) 17 @post = Post.new(post) 18 if @post.save 19 ... 20 end 21 end 22... 23end

ruby

1class Post < ApplicationRecord 2 mount_uploaders :image_name, ItemImageUploader 3 serialize :image_name, JSON 4 # crop用の仮想attribute 5 attr_accessor :image_x 6 attr_accessor :image_y 7 attr_accessor :image_w 8 attr_accessor :image_h 9 ... 10end 11

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

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

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

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

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

defghi1977

2018/03/28 05:54

前回の https://teratail.com/questions/119147 によく似ていますが, クライアントから送信された生画像を「サーバーサイドで画像加工」する方針とされたのですか?
tacro

2018/03/28 18:08

はい、クライアントから生画像と、トリミングする位置情報を送って、それをもとにサーバーサイドでトリミングする方針です!jsを追記しました!
guest

回答1

0

自己解決

自己解決しました。
サーバー側であらかじめトリミング済みの画像データを送信する方法でやってみます。
その上で以下の問題が新たに発生してしまいました…
"path name contains null byte"というエラーの正体を知りたい

投稿2018/03/29 01:03

編集2018/03/29 01:30
tacro

総合スコア23

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問