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

Posted

技术标签:

【中文标题】HTML5 画布 - 将保存的图像分享到社交媒体【英文标题】:HTML5 canvas - Sharing saved image to social media 【发布时间】:2013-01-28 15:46:09 【问题描述】:

感谢您抽出宝贵时间阅读这篇文章。

我浏览了这个论坛上无数的帖子,但仍然无法实现我的目标。

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

打开一个灯箱弹出窗口。

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

我知道这是什么问题,但我无法创建此任务所需的 javascriptphp 脚本。

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

我的想法是创建一个 save.Php 脚本来保存 .png 文件而不在服务器上提示,或者在我按下 #btnPreview 时创建一个假 URL 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

我希望我解释正确。

期待您的回复。

【问题讨论】:

【参考方案1】:

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

【讨论】:

【参考方案2】:

可能有两种情况:

    要能够将照片/帖子 URL 分享到 Facebook,您需要先将照片保存到您的服务器(或至少从您的应用程序提供) 如果您希望将其作为图片(照片)发布到 Facebook,您需要制作一个 OAuth2.0 流程,以便您的应用程序将照片发布到 Facebook 代表用户。

【讨论】:

谢谢 SHOUBHIK,我将创建一个临时目录来存储所有图像。现在只是能够创建该按钮可以将图像即时存储在 Temp 目录中。 服务器上的临时目录。您想以照片或链接的形式发布吗? 我想发的是照片。谢谢您的回复。 @shoubhik 玻色 然后您需要使用 OAuth2.0 进行用户注册(查看 developers.facebook.com) 如果您认为答案接近解决方案,您可以投票赞成 :)

以上是关于HTML5 画布 - 将保存的图像分享到社交媒体的主要内容,如果未能解决你的问题,请参考以下文章

如何将画布保存为html5中的图像?

将 html5 画布图像保存在本地硬盘上

如何将 HTML5 Canvas 保存为服务器上的图像?

保存画布图像(将数据字符串发布到 PHP)

如何在 iOS 上整合社交媒体进行照片分享?

从网站上的按钮将图像上传到多个社交网络的服务