php – HTML5 canvas – 将保存的图像共享到社交媒体

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

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

这会打开一个灯箱弹出窗口.

>图像存储在< 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">

这是我发现的封闭例子
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

我希望我能正确解释.

期待您的回应.