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

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

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

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

Ruby

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

RubyGems

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

Ruby on Rails

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

JavaScript

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

Q&A

解決済

1回答

5544閲覧

Base64でエンコードされた文字列からCarrierwaveに画像をアップできない

tacro

総合スコア23

Ruby on Rails 5

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

Ruby

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

RubyGems

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

Ruby on Rails

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

JavaScript

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

0グッド

1クリップ

投稿2018/03/29 04:49

#前提・実現したいこと
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を使用しています。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました!
javascriptをvar canvas_data = canvas.toDataURL();にし(Data URI scheme formatそのままで送信されるようにする)、
carrierwave-mongoidのgemをインストールすることで無事にアップロードされるようになりました!

投稿2018/03/29 08:06

tacro

総合スコア23

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問