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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

1回答

3907閲覧

canvasで書いた画像をcarrierwaveでデータベースに保存したい。(ruby)

geshi

総合スコア8

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

0クリップ

投稿2015/03/24 07:50

canvasで書いた画像を、ruby の carrierwaveで保存したい。

参考にしたサイト
http://blog.hello-world.jp.net/ruby/2281/
http://herikutu.hatenablog.com/entry/2014/11/25/225205

lang

1 2 <div class="container"> 3 <%= form_for @article, :multipart => true do |f| %> 4 <p><%= f.label :image %></p> 5 <p><%= f.text_field :image %></p> 6 <p><%= f.hidden_field :remote_image_url, :value =>"" %></p> 7 <p><%= f.hidden_field :user_id ,:value => current_user.id%></p> 8<div> 9 <style> 10 #mycanvas { 11 border: 10px solid #999; 12 cursor: crosshair; 13 } 14 .thumbnail { 15 border: 2px solid #999; 16 margin-right: 5px; 17 } 18 </style> 19 <p> 20 <select id="penColor"> 21 <option value="black">黒</option> 22 <option value="red">赤</option> 23 <option value="blue">青</option> 24 </select> 25 <select id="penWidth"> 26 <option value="1">細</option> 27 <option value="3">中</option> 28 <option value="5">太</option> 29 </select> 30 <input type="button" id="erase" value="消去"> 31 <input type="button" id="save" value="登録"> 32 </p> 33 <canvas width="200" height="200" id="mycanvas"> 34 Canvasに対応したブラウザを用意してください。 35 </canvas> 36 <div id="gallery"></div> 37 <br> 38 <input type="button" id="push" value="hello"> 39 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 40 <script> 41 $(function() { 42 var canvas = document.getElementById('mycanvas'); 43 if (!canvas || !canvas.getContext) return false; 44 var ctx = canvas.getContext('2d'); 45 var startX, 46 startY, 47 x, 48 y, 49 borderWidth = 10, 50 isDrawing = false; 51 $('#mycanvas').mousedown(function(e) { 52 isDrawing = true; 53 startX = e.pageX - $(this).offset().left - borderWidth; 54 startY = e.pageY - $(this).offset().top - borderWidth; 55 }) 56 .mousemove(function(e) { 57 if (!isDrawing) return; 58 x = e.pageX - $(this).offset().left - borderWidth; 59 y = e.pageY - $(this).offset().top - borderWidth; 60 ctx.beginPath(); 61 ctx.moveTo(startX, startY); 62 ctx.lineTo(x, y); 63 ctx.stroke(); 64 startX = x; 65 startY = y; 66 }) 67 .mouseup(function() { 68 isDrawing = false; 69 }) 70 .mouseleave(function() { 71 isDrawing = false; 72 }); 73 $('#penColor').change(function() { 74 ctx.strokeStyle = $(this).val(); 75 }); 76 $('#penWidth').change(function() { 77 ctx.lineWidth = $(this).val(); 78 }); 79 $('#erase').click(function() { 80 if (!confirm('本当に消去しますか?')) return; 81 ctx.clearRect(0, 0, canvas.width, canvas.height); 82 }); 83 $('#save').click(function() { 84 var img = $('<img>').attr({ 85 width: 200, 86 height:200, 87 src: canvas.toDataURL() 88 }); 89 var link = $('<a>').attr({ 90 href: canvas.toDataURL().replace('image/jpg', 'application/octet-stream'), 91 }); 92 $('#gallery').append(link.append(img)); 93 ctx.clearRect(0, 0, canvas.width, canvas.height); 94 }); 95 $("#push").on("click", function () { 96 var _form = $("img"); 97 var canvas = $("gallery").attr("href"); 98 $("#article_image").val(canvas); //画像データを二重に送信するのを防ぐ 99 $("#article_remote_image_url").val(canvas); 100 _form.submit(); 101 }); 102 }); 103 </script> 104 </div> 105 <p><%= f.submit %></p> 106 <% end -%> 107</div> 108

canvasでお絵かきすることは出来ましたが、その後DBに保存することが出来ません。

lang

1 def create 2 tmp_article_params = article_params 3 image_data = base64_conversion(tmp_article_params[:remote_image_url]) 4 tmp_article_params[:image] = image_data 5 tmp_article_params[:remote_image_url] = nil 6 @article = Article.new(article_params) 7 @article.save 8 redirect_to articles_path 9 end 10 11 private 12 def article_params 13 params[:article].permit(:title,:article,:user_id,:image, :remote_image_url) 14 end 15 16 def base64_conversion(uri_str, filename = 'base64') 17 image_data = split_base64(uri_str) 18 image_data_string = image_data[:remote_image_url] 19 image_data_binary = Base64.decode64(image_data_string) 20 temp_img_file = Tempfile.new(filename) 21 temp_img_file.binmode 22 temp_img_file << image_data_binary 23 temp_img_file.rewind 24 img_params = {:filename => "#{filename}.#{image_data[:extension]}", :type => image_data[:type], :tempfile => temp_img_file} 25 ActionDispatch::Http::UploadedFile.new(img_params) 26 end 27 28 def split_base64(uri_str) 29 if uri_str.match(%r{data:(.*?);(.*?),(.*)$}) 30 uri = Hash.new 31 uri[:type] = $1 32 uri[:encoder] = $2 33 uri[:data] = $3 34 uri[:extension] = $1.split('/')[1] 35 return uri 36 else 37 return nil 38 end 39 end

特にコントローラー側の仕組みがわからずにいます。
canvasで作成した画像をどうすれば、rubyでデータベースに保存できますか?

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

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

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

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

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

guest

回答1

0

まずJS側、canvasのtoDataURLを使って画像をpngなどの形式のバイナリのbase64エンコードURLに変換します。
これをAjaxでRailsまで送ってあげてください。

Rails側では、この受け取ったdataURLの文字列のうちbase64の部分だけを正規表現あたりで切り出して、Base64.decode64 にかけた結果の画像をcarrierwaveに入れてあげると良いです。
carrierwave-data-uri gem を使えばdataURLからのcarrierwave格納が楽に出来そうなので、使うと良いと思います。

投稿2015/04/16 13:43

AknEp

総合スコア200

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問