6

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

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

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

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

  1. 当我尝试在 facebook、twitter 等上分享带有描述的图像时，图像被存储在<img id"imgPreview" src"data:image/png;base64,...."> 它不起作用。

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

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

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

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

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

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

我希望我解释正确。

期待您的回复。

4

2 回答 2

4

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

于 2013-02-13T15:03:06.830 回答
2

可能有两种情况：

  1. 为了能够将照片/帖子 URL 分享到 Facebook，您需要先将照片保存到您的服务器（或至少从您的应用程序提供）
  2. 如果您希望将其作为图像 ( photo ) 发布到 Facebook，您需要创建一个 OAuth2.0 流程，以便您的应用程序代表用户将照片发布到 Facebook。
于 2013-02-13T06:50:14.770 回答