使用 ruby on rails 和 javascript 将画布转换为图像并在新窗口中打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5403709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert canvas to image and open in new window using ruby on rails and javascript
提问by Mich
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.
我想要实现的是在单击链接、按钮或图像时，看起来更简单，我使用 toDataURL 将画布转换为图像。之后，将打开一个包含此图像的新窗口。
How do I pass the data url generated from toDataURL to a new window using ruby on rails?
如何使用 ruby on rails 将从 toDataURL 生成的数据 url 传递到新窗口？
Thanks in advance.
提前致谢。
回答by polarblau
First off, this has not much to do with Rails. You can use Ruby to tackle this problem, though.
首先，这与 Rails 没有太大关系。不过，您可以使用 Ruby 来解决这个问题。
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):
此时，您可以简单地使用 Javascript 打开一个新窗口并直接在其中打开图像（无需服务器交互）：
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/
这是一个小小提琴来说明这一点：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:
或者您可以将纯 base64 字符串发送到服务器并让您的应用程序创建一个实际图像并使用视图来呈现它：
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 verysmall 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!
！这是一个简化的例子，假设一个非常小的图像。如果您的图片太大了，您将不得不使用“发布”请求，因为您的 URL 将不会携带数据，因为字符串太长了！
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.
那么这只是打开图像并相应地呈现视图的问题。
回答by revobtz
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.
希望这可以在不久的将来帮助某人。
回答by Hokusai
My approach:
我的做法：
var dataURL = canvas.toDataURL("image/png");
var newTab = window.open(dataURL, 'Image');
newTab.focus();
It May be helps someone in future.
将来可能会帮助某人。
