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

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上描述共享图像，微博等它不工作。

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

我想实现的是向这个论坛询问这个概念的最佳实践。

我的想法是，一旦弹出窗口加载我的IMG URL将被

创建一个save.Php脚本服务器或创建一个假的网址 www.example.com/image.png当我按下 #btnPreview

上保存PNG文件，而不提示

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

这是封闭的实施例I人已经发现
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

可能有2种情况：

1. 为了能够分享照片/ URL后向Facebook，你需要有照片保存到你的服务器第一（或至少从您的应用程序服务）
2. 如果您想在Facebook上发布该图片（照片），您需要制作一个 OAuth2.0流程，以便您的应用程序代表用户将照片发布到Facebook 。

Answer 2

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