6

この投稿をお読みいただきありがとうございます。

私はこのフォーラムの無限の投稿に目を通しましたが、まだ目標を達成できません。

ユーザーの描画と画像を保存する html5 キャンバスを作成しました。ユーザーが公開を押すと、 Addthis.comを使用してソーシャル ネットワークで画像を共有するオプションを使用して、画像をプレビューするポップアップ フレーム (ライトボックス) が表示されます。

これは私がこれまでに達成したことです。1. キャンバスに #btnPreview というボタンがあります

$("#btnPreview").click(function (event) {
    canvas.deactivateAll();
    var strDataURI = canvas.toDataURL("png");
    var proporcao = 1;
    var proporcaoW = 500 / canvas.width;
    var proporcaoH = 400 / canvas.height;
    if (proporcaoW < proporcaoH) {
        proporcao = proporcaoW;
    } else {
        proporcao = proporcaoH;
    }
    $("#addthis_shareable").width(canvas.width * proporcao).height(canvas.height * proporcao).attr("src", strDataURI);
    //  $("#imgPreview").width(canvas.width*proporcao).height(canvas.height*proporcao).attr("src", strDataURI);
    $("#modalPreview").modal("show");
});

ライトボックスのポップアップ ウィンドウが開きます。

  1. <img id"imgPreview" src"data:image/png;base64,...."> FacebookやTwitterなどで説明付きの画像を共有しようとすると、画像が保存されます。

何が問題なのかはわかっていますが、このタスクに必要な javascript および php スクリプトを作成できません。

私が達成したいのは、このフォーラムでこのコンセプトのベスト プラクティスを尋ねることです。

www.example.com/image.png私の考えは、サーバーにプロンプ​​トを表示したり、押したときに 偽のURLを作成したりせずに.pngファイルを保存するsave.Phpスクリプトを作成することです#btnPreview

ポップアップ ウィンドウがロードされると、私の img URL は次のようになります。

<img id"imgPreview" src"www.example.com/images/md5_timestamp.png">

これは私が見つけた閉じた例です
例 1 は例 2 につながり
ます 例 2 は base64 を保存します
例 3 キャンバスを JPG または PNG として保存し
ます

正しく説明したことを願っています。

あなたの応答を楽しみにしています。

4

2 に答える 2

4

これを確認してください: Ajax によって PHP に送信された Fabric.js canvas.toDataURL() ご覧 のとおり、キャンバスの PNG base64 データを送信し、サーバー側の PHP で画像を生成できます。これは、サーバー側の PHP で使用できるコードです: https://gist.github.com/rodrigopandini/2149853

于 2013-02-13T15:03:06.830 に答える
2

2 つのシナリオが考えられます。

  1. 写真/投稿の URL を Facebook に共有できるようにするには、最初に写真をサーバーに保存する必要があります (または、少なくともアプリケーションから提供されます)。
  2. それを画像 ( photo ) として Facebook に投稿したい場合は、アプリケーションがユーザーに代わって写真を Facebook に投稿するように OAuth2.0 フローを作成する必要があります。
于 2013-02-13T06:50:14.770 に答える