2

Rails 3.2 アプリで次の JavaScript を使用してキャンバスから Base64 に変換した Highcharts チャートがあります。

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

今、その画像を画像ファイルにデコードしたいと思います。ただし、唯一の目的は Facebook で共有することなので、サーバーに保存したくありません。2 つのオプションが表示されます。

-データをimgサーバーに送り返し、それを一時フォルダーに保存されている画像に変換し、ビューでレンダリングします。

- JavaScript を使用して Base64 を PNG ファイルにデコードし、新しいウィンドウで開きます。

どの方向に進むべきか、どのように実装するか? 私は何時間もグーグルで検索し、必要なことの一部を実行するいくつかの例を見つけましたが、ストーリー全体を見つけることはできません.

このソリューションは非常に有望に思えましたが、イメージが大きすぎて get リクエストを使用できず、javascript に慣れていないため、post リクエストを使用しようとして失敗しました:

キャンバスを画像に変換し、Ruby on Rails と JavaScript を使用して新しいウィンドウで開きます

編集:別の潜在的な解決策として、画像へのリンクを自動的に返すbase64文字列を送信できるWebツールはありますか?

4

1 に答える 1

0

要するに：最初のオプションが最適です

長いバージョン: base64 url​​ を使用して facebook に投稿できるかどうかはわかりません - 巨大な base64 文字列に対して GET リクエストを使用できないのと同じ理由で (そんなに長い url をサポートしていますか?) - だからあなたはかもしれません実際にこれらの写真を保存する必要があります。

よくわかりませんが、ユーザーが直接投稿した（「共有」ボタンでリンクされていない）写真のみがFacebook側に保存され、他の写真は実際にサーバーに座っていると思います。

まず、Facebook API を介して巨大な base64 文字列を直接送信するかどうかをテストする必要があります。FB のオンライン ツールを使用して小さな画像用のグラフ API メタ タグを作成しようとしましたが、うまくいきませんでした。私はFB APIをよく知らないことを認めますが）。

この画像を永久に保存する必要があることを認めましょう。AJAX POST リクエストを介してサーバーに送信するのはそれほど難しくありません。JQueryを使用すると、さらに簡単になります。後で ruby​​ を使用して base64 をイメージ ファイルに変換するだけです。

編集：私は質問をよく理解していないのだろうか. ユーザーが作成したイメージをダウンロードできるようにしたいだけですか? その場合は、右クリックして生成された画像を保存するだけです。canvas2image libを使用すると、「右クリックが苦手な」ユーザーでもこれを簡単に行うことができます ;)

EDIT 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 の docでさらに多くの例を利用できます。JQuery の使い方を学ぶことをお勧めします。JQuery がシンプルでありながら強力であることがすぐにわかるでしょう。

于 2012-11-17T12:46:39.303 に答える