RMagick to_blob display via AJAX call

Hi,

HELP!

This seems too simple - I MUST be overlooking something…

I can create an rmagick image in my controller and display it fine.

When I create a second image and try to refresh via observe_form, it
shows garbled text…

BTW: RMagick is wonderful.

I am having a difficulty in what seems very elementary in Rails.

  1. Create a form that user enters some params (color)

  2. Observe the form and create an image (to_blob)

  3. Display the image on the same form (near real time). As the user
    enter params it builds their image.

What it displays in the div (dynamic image) is…

�PNG IHDR $ �6 pHYsHHF�k>�IDATx���1 �@���C �) ˡKe� �7?�33 R�� � �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$��T 4 �W�IEND�B�


Controller

renders test image for static section - works GREAT.

def test_image
rec_color = “blue”

    @color_img = Magick::Image.new(288, 36) {self.background_color

= rec_color }
@color_img.format = ‘png’
@my_blob = @color_img.to_blob

    send_data @my_blob, :filename => "mytabs2.png",
      :disposition => 'inline',
      :type => "image/png"

end

def watch_text # callback for observe form
rec_color = params[:color]

    @color_img = Magick::Image.new(288, 36) {self.background_color

= rec_color }
@color_img.format = ‘png’
@my_blob = @color_img.to_blob

    send_data @my_blob, :filename => "mytabs.png",
      :disposition => 'inline',
      :type => "image/png"

end


View

<% form_tag ({:controller => ‘tabs’, :action => ‘create_tabs’} , {:id
=> “entries”}) do -%>

<%= select_tag (:color, options_with_colors(Tab.allowable_colors)) %>

this part renders fine…

<b>static image </b>   <br>
<%= image_tag url_for(:controller => "tabs", :action =>

“test_image”, :id => 0) %>

=> (Blue box displays here)

this part shows garbled text…

<b>dynamic image </b>   <br>

  <div id='results'>
        <% if @my_blob %>
            <%= image_tag url_for(:controller => "tabs", :action

=> “watch_text”, :id => 0) %>
<% end %>

=> (garbled text here)
�PNG IHDR $ �6 pHYsHHF�k>�IDATx���1 �@���C �) ˡKe� �7?�33 R�� � �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$ I @�� �d$��T 4 �W�IEND�B�

<%= submit_tag 'Create' %>

<% end %>
<%= observe_form 'entries', :frequency => 2.0,
  :update => :results,
  :url => { :action => :watch_text }
   %>

On Sep 8, 8:15 pm, jc [email protected] wrote:

<%= observe_form 'entries', :frequency => 2.0,
  :update => :results,
  :url => { :action => :watch_text }
   %>

This observe_field looks dodgy - you’re telling it to replace the
contents of the results div with the data that comes back from the
server, but what comes back isn’t html, its raw png data, which the
browser then attempts to display as html.

Fred

rigth and also

<%= image_tag url_for(:controller => “tabs”, :action
=> “watch_text”, :id => 0) %>

the image tag should poing to a path in the server and the image should
be
serve by the webserver not rails.

On Thu, Sep 9, 2010 at 3:46 AM, Frederick C.
<[email protected]

On Sep 9, 2010, at 7:34 AM, radhames brito wrote:

right and also

<%= image_tag url_for(:controller => “tabs”, :action
=> “watch_text”, :id => 0) %>

the image tag should point to a path in the server and the image
should be serve by the webserver not rails.

As long as the URL will return an image, it does not need to be an
asset served by the webserver. In an old project, I had a
SparklineController that could return the sparkline for a given set of
parameters and it worked quite well.

However I do agree with Frederick’s comment about your observe_form.

-Rob

   %>

Groups “Ruby on Rails: Talk” group.
You received this message because you are subscribed to the Google
Groups “Ruby on Rails: Talk” group.
To post to this group, send email to rubyonrails-
[email protected].
To unsubscribe from this group, send email to [email protected]
.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en
.

Rob B.
[email protected] http://AgileConsultingLLC.com/
[email protected] http://GaslightSoftware.com/

the controller you return a partial with a link to the path of the image
in
the server

Rob B. wrote:

On Sep 9, 2010, at 7:34 AM, radhames brito wrote:

right and also

<%= image_tag url_for(:controller => “tabs”, :action
=> “watch_text”, :id => 0) %>

the image tag should point to a path in the server and the image
should be serve by the webserver not rails.

As long as the URL will return an image, it does not need to be an
asset served by the webserver. In an old project, I had a
SparklineController that could return the sparkline for a given set of
parameters and it worked quite well.

However I do agree with Frederick’s comment about your observe_form.

-Rob

   %>

Groups “Ruby on Rails: Talk” group.
You received this message because you are subscribed to the Google
Groups “Ruby on Rails: Talk” group.
To post to this group, send email to rubyonrails-
[email protected].
To unsubscribe from this group, send email to [email protected]
.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en
.

Rob B.
[email protected] http://AgileConsultingLLC.com/
[email protected] http://GaslightSoftware.com/

What I “seem” to need to do (and this works) is to save the image as a
resoruce on disk, then call it as follows.

  • delete previous image if it exists
  • create a new image
  • set (flash) the new image name
  • render the new webserver source (to new image name - timestamped)
    (I will add user_id, etc, later)

I still cannot see how to possibly pass a blob through ajax response, so
this is the my simple (NOT effective approach) versus memory storage.

def watch_text

    rec_color = params[:color]

    @color_img = Magick::Image.new(288, 36) {self.background_color = 

rec_color }
@color_img.format = ‘png’
if flash[:prev_fname]
File.open(“public/images/#{flash[:prev_fname]}”)
File.delete(“public/images/#{flash[:prev_fname]}”)
end

    @ts = Time.now.to_i.to_s
    f_name = "tab_" + @ts + ".png"
    @color_img.write("public/images/#{f_name}")
    flash[:prev_fname] = f_name

   @mb2 = "/images/#{f_name}"
   render(:text => '<img alt="0" src="' + @mb2 + '" />' )

end

On Sep 9, 5:54 pm, John C. [email protected] wrote:

I still cannot see how to possibly pass a blob through ajax response, so
this is the my simple (NOT effective approach) versus memory storage.

I think the root of the problem you are grappling with is that putting
an image on a page requires two http requests: one that creates an
image tag with the appropriate src attribute, and then the request
from the browser when it tries to display that img tag.
If that isn’t acceptable then there is a way of encoding the image
data in the img tag your self, you basically stick

It’s not supported by all browsers though (

)

Fred

On Sep 9, 2010, at 3:12 PM, radhames brito wrote:

can you explain why arent you using paperclip? i use it with
imagemagick and can easily convert my file to almost any format with
very easy.

Well, he’s not starting with a file, for one thing.

-Rob

storage.

To unsubscribe from this group, send email to [email protected]
[email protected].
To unsubscribe from this group, send email to [email protected]
.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en
.

Rob B.
[email protected] http://AgileConsultingLLC.com/
[email protected] http://GaslightSoftware.com/

Lol

On Thu, Sep 9, 2010 at 7:24 PM, Rob B.

can you explain why arent you using paperclip? i use it with imagemagick
and
can easily convert my file to almost any format with very easy.

On Thu, Sep 9, 2010 at 2:07 PM, Frederick C.
<[email protected]

Frederick C. wrote:

On Sep 9, 5:54�pm, John C. [email protected] wrote:

I still cannot see how to possibly pass a blob through ajax response, so
this is the my simple (NOT effective approach) versus memory storage.

I think the root of the problem you are grappling with is that putting
an image on a page requires two http requests: one that creates an
image tag with the appropriate src attribute, and then the request
from the browser when it tries to display that img tag.
If that isn’t acceptable then there is a way of encoding the image
data in the img tag your self, you basically stick

It’s not supported by all browsers though (
data URI scheme - Wikipedia
)

Fred

That is great Fred.

let me check to compatibility to see what browsers are supported.
Would like to support FF/Chrome/Safari/IE at least (no offense intended
if I left off your favorite browser)

I will give this a shot…