Rails, Canvas and Javascript - Convert image from Flickr to grayscale

Question

For a while I'm trying to convert an image hosted on Flickr to grayscale on the fly.

I've tried the javascript/canvas solution but got caught by the same origin policy. For this there's the $.getImageData solution but since it depends on another server I thought it won't be very reliable.

I decided to try convert the images on the server side. Using Rails.

My first option is convert the images to base64 using AciveSupport::Base64 before displaying them on a canvas and then converting using javascript. That way I might trick the same origin policy. Just wondering how slow all this conversion will be every time someone loads the page.

The other option would be using something like Rmagick to do the trick. But I'm not sure if I can use RMagick without saving the converted image somewhere before linking it on my view.

Would be great to have some thoughts on this solutions since I'm a beginner and have no idea how wrong these implementations might be.

score 0 · Answer 1 · answered Dec 12 '11 at 16:31

0

Just do it on the server. Same origin policy forces you to use some sort of server anyway. Rmagick is ok, I've used it for color (histogram) analysis before. Maybe desaturation is a candidate for more optimized libraries.

As for serving the actual image, you don't need a file, the image itself is a separate GET command (action) that needs to be supported by your server. So it can just return data. That's not to say this is always the best approach.

answered Dec 12 '11 at 16:31

buddhabrot

1,558
9
14

Thanks, I'll try to do it on the server. Do you have any suggestion for a library to handle desaturation? – Gustavo Dec 12 '11 at 22:33
No but you need the formula to turn RGB to HSB and then ignore the S value. – buddhabrot Dec 13 '11 at 07:49

score 0 · Answer 2 · answered Dec 15 '11 at 18:41

Just posting here how I implemented the solution. I decided to create a kind of a proxy for the external images. This way I don't get caught on the same origin policy and can desaturate the images using canvas and javascript with one of the many scripts available.

On my view:

<%= image_tag "/proxy?url=#{photoset.flickr_thumb_url}", :class => "gray" %>

On my controller:

def image_proxy
  image_url = params[:url]
  image = open(image_url).read
  response.headers["Expires"] = CGI.rfc1123_date(Time.now + 1.day)
  send_data image, :filename => File.basename(image_url), :disposition => 'inline'
end

I'm just annoyed by the fact that any image that anyone pass using this url will work. It's not very secure, is it? I'm still trying to figure out a way to fix this. I'd appreciate any help.

Rails, Canvas and Javascript - Convert image from Flickr to grayscale

2 Answers2