{"id":57469,"date":"2010-01-06T21:17:57","date_gmt":"2010-01-06T21:17:57","guid":{"rendered":"http:\/\/pullmonkey.com\/?p=57469"},"modified":"2010-01-06T21:20:06","modified_gmt":"2010-01-06T21:20:06","slug":"post_ofc_graph_as_image","status":"publish","type":"post","link":"http:\/\/pullmonkey.com\/2010\/01\/06\/post_ofc_graph_as_image\/","title":{"rendered":"POST OFC Graph as Image"},"content":{"rendered":"

I was asked recently (well sort of) to give an example of saving an image to the server<\/a>. If you look at teethgrinder's example for this<\/a>, you will see that he has made available an external interface to do just that - POST your graph as png raw data to your server for storage. This has many benefits such as saving the image for use in a PDF report or for printing, since we know at times it is a bit troublesome to print the embedded flash object.
\nI think the main problem people are having with this is the receiving of the image data post - see the upload_image method below. Also, teethgrinder's example never really says where to make the post_image() call. So I touch on both in the code below.
\nHere is an example of the png that is saved when I did this for the chart in the previous example:
\n\"OFC<\/p>\n

Well, let's just get right in to the code.
\nThe controller contains the same code as my last post<\/a> with only a few minor changes to the index method and the addition of the upload_image method.
\nIn the controller<\/b>, I have this:<\/p>\n\n\n
\n
1\r\n<\/tt>2\r\n<\/tt>3\r\n<\/tt>4\r\n<\/tt>5\r\n<\/tt>6\r\n<\/tt>7\r\n<\/tt>8\r\n<\/tt>9\r\n<\/tt>10<\/strong>\r\n<\/tt>11\r\n<\/tt>12\r\n<\/tt>13\r\n<\/tt>14\r\n<\/tt>15\r\n<\/tt>16\r\n<\/tt>17\r\n<\/tt>18\r\n<\/tt>19\r\n<\/tt>20<\/strong>\r\n<\/tt>21\r\n<\/tt>22\r\n<\/tt><\/pre>\n<\/td>\n
\n
class<\/span> TestItController<\/span> < ApplicationController<\/span>\r\n<\/tt>  def<\/span> index<\/span>\r\n<\/tt>    # note the user of open_flash_chart_object_from_hash instead of just open_flash_chart_object<\/span>\r\n<\/tt>    # this allows you to pass in the id of the div you want the the chart to be in<\/span>\r\n<\/tt>    # this is useful for when we need to findSWF by this id<\/span>\r\n<\/tt>    @graph<\/span> = open_flash_chart_object_from_hash("<\/span>\/test_it\/chart<\/span>"<\/span><\/span>, :div_name<\/span> => "<\/span>my_chart<\/span>"<\/span><\/span>)\r\n<\/tt>  end<\/span>\r\n<\/tt>\r\n<\/tt>  # added to recieve the post data for the OFC png image of the OFC graph<\/span>\r\n<\/tt>  def<\/span> upload_image<\/span>\r\n<\/tt>    name = "<\/span>tmp_image.png<\/span>"<\/span><\/span> || params[:name<\/span>]\r\n<\/tt>    # the save_image method that is provided by the OFC swf file sends raw post data, so get to it like this<\/span>\r\n<\/tt>    data = request.raw_post\r\n<\/tt>    File<\/span>.open("<\/span>#{<\/span>RAILS_ROOT<\/span>}<\/span><\/span>\/tmp\/<\/span>#{<\/span>name}<\/span><\/span>"<\/span><\/span>, "<\/span>wb<\/span>"<\/span><\/span>) { |f| f.write(data) } if<\/span> data\r\n<\/tt>    render :nothing<\/span> => true<\/span>\r\n<\/tt>  end<\/span>\r\n<\/tt>\r\n<\/tt>  def<\/span> chart<\/span>\r\n<\/tt>    # same code from here - http:\/\/pullmonkey.com\/2010\/01\/05\/open-flash-chart-ii-x-axis-date-and-time\/ <\/span>\r\n<\/tt>    ...\r\n<\/tt>  end<\/span>\r\n<\/tt>end<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n
So just note<\/b> the use of open_flash_chart_object_from_hash() in the index method, this way we can pass in the id of the div.
\nIn the view<\/b>, I have this:<\/p>\n\n\n
\n
1\r\n<\/tt>2\r\n<\/tt>3\r\n<\/tt>4\r\n<\/tt>5\r\n<\/tt><\/pre>\n<\/td>\n
\n
<%=<\/span> javascript_include_tag 'swfobject.js' %>\r\n<\/tt><%<\/span>=<\/span><\/span> @graph<\/span> %>\r\n<\/tt><%=<\/span> save_as_image("http:\/\/localhost:3000\/test_it\/upload_image?name<\/span>=<\/span><\/span>tmp.png"<\/span>, :id => <\/span>"<\/span><\/span>my_chart"<\/span>) %>\r\n<\/tt><br\/>\r\n<\/tt><%= button_to_function <\/span>"<\/span><\/span>Save<\/span> Image<\/span>"<\/span>, <\/span>"<\/span><\/span>post_image()"<\/span> %><\/span><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n
\nReally the only difference from what we would normally have in our view is that I am using the save image setup method that was added to the open flash chart ruby on rails plugin<\/a> in the last couple hours (as of this post).  The save_image method takes some arguments, mainly the url to post the image data to and the id of the chart we setup in the controller.<\/p>\n","protected":false},"excerpt":{"rendered":"
I was asked recently (well sort of) to give an example of saving an image to the server. If you look at teethgrinder’s example for this, you will see that he has made available an external interface to do just that – POST your graph as png raw data to your server for storage. This […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,31,4,26,51,14,5,9,28,30],"tags":[42,52,109,40,218,110,210,211,43],"_links":{"self":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/57469"}],"collection":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/comments?post=57469"}],"version-history":[{"count":3,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/57469\/revisions"}],"predecessor-version":[{"id":57471,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/57469\/revisions\/57471"}],"wp:attachment":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/media?parent=57469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/categories?post=57469"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/tags?post=57469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}