HTML5畫布 - 將保存的圖像共享到社交媒體

Question

感謝您抽出寶貴時間閱讀這篇文章。

我在這個論壇上看了無數的帖子，但仍然無法實現之后的目標。

我創建了一個html5畫布，用於保存用戶的圖紙和圖像。 當用戶按發布時，將會提示他/她預覽她的圖像的彈出框（燈箱），並可選擇使用Addthis.com在社交網絡上共享圖像。

這是我到目前為止所取得的成就。 在我的畫布上，我有一個名為#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");
});

這會打開一個燈箱彈出窗口。

2. 圖像存儲在<img id"imgPreview" src"data:image/png;base64,....">當我試圖與Facebook，Twitter等上的描述共享圖像時，它不起作用。

我知道它有什么問題，但我無法創建此任務所需的javascript和php腳本。

我想要實現的是向這個論壇提出這個概念的最佳實踐。

我的想法是創建一個save.Php腳本，在我按#btnPreview時保存.png文件而不在服務器上提示或創建假網址www.example.com/image.png

一旦彈出窗口加載我的img url就會

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

這是我發現的封閉例子
示例1導致示例2
示例2保存base64
示例3將畫布保存為JPG或PNG
示例4非常接近以后的內容 - 最底層的答案

我希望我能正確解釋。

期待您的回應。

Answer 1

可能有兩種情況：

1. 為了能夠將照片/帖子URL分享到Facebook，您需要先將照片保存到您的服務器（或至少從您的應用程序中提供）
2. 如果您希望將其作為圖像（照片）發布在Facebook上，則需要制作OAuth2.0流程，以便您的應用程序代表用戶將照片發布到Facebook。

Answer 2

檢查一下： 由Ajax發送給PHP的Fabric.js canvas.toDataURL（）正如您所看到的，您可以發送畫布的PNG base64數據並在服務器端以PHP格式生成圖像。 這是您可以在服務器端的PHP中使用的代碼： https ： //gist.github.com/rodrigopandini/2149853