使用Ruby on Rails和JavaScript将画布转换为图像并在新窗口中打开

Question

我在这个问题上卡住了，希望你们能帮助我。我的目标是，在点击一个链接、按钮或图像后，使用 toDataURL 将画布转换为图像。然后打开一个包含此图像的新窗口。如何使用 Ruby on Rails 将由 toDataURL 生成的数据 URL 传递到新窗口？提前感谢您的帮助。

- Mich

Answer 1

首先，这与Rails关系不大。不过你可以使用Ruby来解决这个问题。

像你已经在做的那样，首先获取画布的内容：

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

此时，您可以使用Javascript打开一个新窗口，并在其中直接打开图像（无需与服务器交互）：

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

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

这里有一个小的示例fiddle：http://jsfiddle.net/XtUFt/

或者你可以将纯的base64字符串发送到服务器，让你的应用程序创建一个实际的图片并使用视图来呈现它：

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

！这只是一个简化的示例，假定图像非常小。如果您的图像更大，您将不得不使用“post”请求，因为您的 URL 不会携带数据，因为字符串太长了!

然后在服务器上，您可以使用以下内容来创建图像：

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

那就只是打开图片并相应地渲染视图的问题。

- polarblau

---

谢谢您的及时回复，polarblau。但是为什么早期帖子中建议的以下方法会打开一个窗口，显示指示页面仍在加载的图标？var window = window.open(); window.document.write("image tag with src= dataURL");我的主要目的是让用户将他在画布中看到的图表保存为图像。 在另一个窗口中看到所选图表的图像后，用户可以右键单击该图像以保存它。因此，我想上述方法已经足够了。 但如果我错了，请纠正我。提前致谢。 - Mich

我已经添加了一个示例，展示链接的功能。看起来可以工作。但你是对的——加载图标没有消失。你可以尝试指定window.open函数所需的参数，看看是否有帮助。 - polarblau

非常感谢您的及时回复，polarblau。经过大量的谷歌搜索，我发现在将内容写入新窗口后，我们必须使用window.document.close()来表示我们已经停止向窗口写入内容。因此，在添加了close()函数之后，一旦图像被显示出来，加载图标就会消失。 - Mich

Answer 2

虽然我来晚了，但这里有一个快速而简单的方法来解决这个问题：

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

希望这篇文章能在不久的将来对某些人有所帮助。

- revobtz

Answer 3

我的方法：

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

它可能会在未来帮助某些人。

- Hokusai