Question

感谢您抽出宝贵时间阅读此帖。

我已经在这个论坛上看了无数的帖子，但仍然无法实现之后的目标。

我创建了一个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");
});

打开一个灯箱弹出窗口。

图片存储在<img id"imgPreview" src"data:image/png;base64,...."> 当我试图与Facebook，Twitter等上的描述分享图像时它不起作用。

我知道它有什么问题，但我无法创建此任务所需的javascript和php脚本。

我想要达到的目的是向这个论坛提出这个概念的最佳实践。

我的想法是创建一个save.Php脚本，当我按下www.example.com/image.png时，会在服务器上没有提示的情况下保存.png文件或创建虚假网址#btnPreview

一旦弹出窗口加载我的img url就会

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

这是我发现的封闭例子 Example 1 that leads to example 2
Example 2 save base64
Example 3 Saving canvas as JPG or PNG
Example 4 Very Close to what am after - The bottom answer

我希望我能正确解释。

期待您的回应。

Answer 1

可能有两种情况：

为了能够将照片/帖子的URL分享到Facebook，您需要先将照片保存到您的服务器（或至少从您的应用程序中提供）
如果你想在Facebook上发布图像（照片），你需要制作一个 OAuth2.0流程使您的应用程序将照片发布到Facebook 代表用户。

Answer 2

检查一下： Fabric.js canvas.toDataURL() sent to PHP by Ajax 如您所见，您可以发送画布的PNG base64数据，并在服务器端以PHP格式生成图像。这是您可以在服务器端的PHP中使用的代码： https://gist.github.com/rodrigopandini/2149853

HTML5画布 - 将保存的图像共享到社交媒体

2 个答案: