javascript - 在不保存服务器的情况下在 Rails 3 应用程序中进行 base64 解码

Question

我有一个 Highcharts 图表，我在我的 Rails 3.2 应用程序中使用以下 javascript 从 Canvas 转换为 Base64。

canvg(document.getElementById('chart'), chart.getSVG())
var canvas = document.getElementById("chart");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

现在，我想将该图像解码为图像文件。但是，我不想将其保存到服务器，因为唯一目的是在 Facebook 上共享。我看到两个选项:

-将数据从 img 发送回服务器，然后将其转换为存储在临时文件夹中的图像，并在 View 中呈现。

-使用javascript将Base64解码为PNG文件并在新窗口中打开。

我应该选择哪个方向以及如何实现？我在 Google 上搜索了几个小时，找到了一些可以满足我部分需求的示例，但我找不到完整的故事。

这个解决方案看起来很有前途，但是我的图像太大而无法使用 get 请求，而且我对 javascript 不是很熟悉，所以我尝试使用 post 请求失败了:

Convert canvas to image and open in new window using ruby on rails and javascript

编辑:作为另一种可能的解决方案，是否有一种网络工具可以让我发送 base64 字符串，该字符串将自动返回带有图像的链接？

Answer 1

简而言之:您的第一个选择是最好的

长版本:我不确定您是否可以使用 base64 url​​ 在 facebook 上发帖 - 出于同样的原因，您不能对巨大的 base64 字符串使用 GET 请求(它们是否支持 url有那么长？)- 所以您实际上可能需要 保存这些图片。

我不确定，但我认为只有用户直接发布的图片(不是通过“分享”按钮链接到)保存在 facebook 端，其他的实际上是坐在你的服务器上。

首先，您应该测试直接通过 facebook API 发送巨大的 base64 字符串是否有效——我尝试使用 FB 的在线工具为小图像创建一个 graph api 元标记但它不起作用，所以这不起作用看起来不错(虽然我承认我不太了解 FB API)。

让我们承认您必须永久保存此图像 - 通过 AJAX POST 请求将其发送到您的服务器并不难。如果你使用 JQuery它甚至非常简单。之后只需使用 ruby​​ 将 base64 转换为图像文件即可。

编辑: 我只是想知道我是否很好地理解了这个问题。您只是希望您的用户能够下载创建的图像吗？如果是这样，他们只需右键单击>保存生成的图像。 canvas2image lib甚至可以让“右键单击受损”的用户更容易做到这一点；)

编辑 2:这是一个使用 JQuery 的 ajax POST 请求示例:

$.post( 
  // first argument : the URL you want to POST to
  'url/to/post.js',
  // second argument: the data to send to the server
  myData,
  // third argument : a callback function, 
  // that is called when the request is complete
  // and is passed the data returned by the server 
  // + response status (success, error...)
  function( data ){    
    alert('request completed, returned :' + data);
  });                  

所以在你的情况下，你可以这样做:

$.post(
  '<%= create_facebook_image_path format: :js %>',
  { base_64_string: img },
  function( data ){
    $('#viewport').append( $('<img />').attr({ src: data.url }) );
  });

更多示例可在 JQuery's doc 中找到，包括如何处理成功/错误状态。我建议您学习使用 JQuery，您很快就会发现它简单而强大!