15

I'm pretty stuck at this problem and hope you guys can help me.

What I'm trying to achieve is upon clicking a link, button or image, which ever seems simpler, I convert canvas into image using toDataURL. After that a new window containing this image is opened.

How do I pass the data url generated from toDataURL to a new window using ruby on rails?

Thanks in advance.

idlefingers
  • 31,659
  • 5
  • 82
  • 68
Mich
  • 257
  • 1
  • 3
  • 9

3 Answers3

25

First off, this has not much to do with Rails. You can use Ruby to tackle this problem, though.

First fetch the content of the canvas as you're already doing:

var dataURL = canvas.toDataURL("image/png");

At this point you could simply open a new window with Javascript and open the image straight in there (no server interaction needed):

var window = window.open();
window.document.write('<img src="'+dataURL+'"/>');

$('a.my-link').click(function(){
  open().document.write('<img src="'+dataURL+'"/>');
  return false;
});

Here's a small fiddle to illustrate this: http://jsfiddle.net/XtUFt/

Or you could send the pure base64 string to the server and have your app create an actual image and use a view to render it:

var base64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "") ;
var window = window.open('http://www.yourapp.com/controller/action?base64='+base64);

!This is a simplified example and assumes a very small image. If your image is anyhow bigger you'll have to use a 'post' request because your URL will not carry the data since the string is simply too long!

And on the server you then can use to create the image:

require 'base64'
File.open('your/image/path/and/name.gif', 'wb') do|f|
  f.write(Base64.decode64(params[:base64]))
end

Then it's just a question of opening the image and rendering a view accordingly.

polarblau
  • 17,649
  • 7
  • 63
  • 84
  • Thank you for the prompt reply polarblau. But why does the following method suggested in the earlier post opens a window that shows the icon that indicates the page is still loading? var window = window.open(); window.document.write("image tag with src= dataURL"); My main purpose is to enable user to save charts he sees in the canvas as an image. After seeing the image of the selected chart appearing in another window, the user is able to right click on the image to save it. So I guess the above method is sufficient. But please do correct me if I'm wrong. Thanks in advance. – Mich Mar 24 '11 at 09:16
  • I've added an example on how what the link could do. Seems to work. But you're right — the loading icon doesn't disappear. You could try to specify the parameters the `window.open` function takes and see if that helps. – polarblau Mar 24 '11 at 10:33
  • 1
    Thank you again for the prompt reply polarblau. After much google-ing, I found out that we have to use window.document.close(); after writing into the new window to signify that we've stopped writing to the window. So after i added the close() function, the loading icon disappeared once the image is being displayed. – Mich Mar 25 '11 at 09:47
2

I am late for this but here is one quick dirty liner that solves this question:

 window.open(document.getElementById("mycanvas").toDataURL());

Hope this helps someone in the near future.

revobtz
  • 606
  • 10
  • 12
1

My approach:

var dataURL = canvas.toDataURL("image/png");
var newTab = window.open(dataURL, 'Image');
newTab.focus();

It May be helps someone in future.

Hokusai
  • 2,219
  • 1
  • 21
  • 22