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

感谢您花时间阅读这篇文章。

我在这个论坛上看了无数的帖子，但仍然无法实现我所追求的。

我创建了一个用于保存用户绘图和图像的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");
});

打开一个灯箱弹出窗口。

2. 图像存储在<img id"imgPreview" src"data:image/png;base64,....">中当我试图在脸书、推特等上分享带有描述的图片时，它不起作用

我知道问题出在哪里，但无法创建此任务所需的javascript和php脚本。

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

我的想法是创建一个保存。当我按下#btnPreview 时，在服务器上保存.png文件而不提示或创建假url www.example.com/image.png的Php脚本

一旦弹出窗口加载我的img url将是

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

这是我找到的封闭示例
导致示例2的示例1
示例2 save base64
示例3将画布保存为JPG或PNG
示例4非常接近am之后的内容-底部答案

我希望我解释得对。

期待您的回复。