在 Facebook 上分享画布答案

【问题标题】：Share canvas on Facebook在 Facebook 上分享画布
【发布时间】：2012-11-13 14:21:49
【问题描述】：

我有一个网站，用户可以在其中设计智能手机外壳。在某一时刻，用户应该能够在 Facebook 上分享设计，包括设计。我有对象和 , 将“样式”设置为画布的数据 URI。

分享时自定义图片的代码为：

我将如何与我的图像共享它，因为它是一个数据 URI。

谢谢

更新：我现在将画布保存在服务器上，并正确链接。虽然，我似乎无法编辑 Facebook 从中读取缩略图的链接的“href”。

我试过了：

var fblink = document.getElementById("facebook_share"); fblink.href="http://example.com/image.png";

与

fblink.setAttribute("href", "http://example.com/image.png");

似乎没有一个工作。 'fblink' 对象是正确的，因为我可以读取 'rel' 等。

【问题讨论】：

将画布数据作为图像（并使用其 URL）保存到您的服务器不是一种选择吗？
我实际上正在寻找我们正在谈论如何做到这一点。有什么建议吗？
您是否尝试过这种方法：html5canvastutorials.com/advanced/…（您可能面临的最大问题是跨服务器安全性 - 您需要确保将图像保存在提供服务的同一台机器上你的画布和javascript）
这基本上和我做的一样，不同的是'src'是数据URI持有者，而不是我的'style'。
您使用什么服务器端技术（ASP.NET、PHP 等）？这不是仅通过使用前端代码 AFAIK 就可以实现的。

标签： javascript facebook html canvas

【解决方案1】：

我个人使用canvas.toDataURL() 生成画布内容的 base64 编码 URL。

之后，我使用以下命令 Base64Binary.decode(encodedPng) 解码了 URL

一旦你有你的解码图像，你可以把它放在一个表单中，并通过下面代码中指定的 XMLHttpRequest 对象发送所有这些：

            // Random boundary defined to separate element in form
            var boundary = '----ThisIsTheBoundary1234567890';

            // this is the multipart/form-data boundary we'll use
            var formData = '--' + boundary + '\r\n';
            formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
            formData += 'Content-Type: ' + mimeType + '\r\n\r\n';

            // let's encode our image file
            for ( var i = 0; i < imageData.length; ++i ) {
                formData += String.fromCharCode( imageData[ i ] & 0xff );
            }

            formData += '\r\n';
            formData += '--' + boundary + '\r\n';
            formData += 'Content-Disposition: form-data; name="message"\r\nContent-Type: text/html; charset=utf-8\r\n\r\n';
            formData += message + '\r\n'
            formData += '--' + boundary + '--\r\n';

            // Create a POST XML Http Request
            var xhr = new XMLHttpRequest();
            xhr.open( 'POST', 'https://graph.facebook.com/me/photos?access_token=' + authToken, true );
            // Call back function if POST request succeed or fail
            xhr.onload = xhr.onerror = function() {
                if ( !(xhr.responseText.split('"')[1] == "error") ) {
                    // If there is no error we redirect the user to the FB post she/he just created
                    var userID = xhr.responseText.split('"')[7].split('_')[0];
                    var postID = xhr.responseText.split('"')[7].split('_')[1];
                    w = window.open('https://www.facebook.com/'+userID+'/posts/'+postID,
                            'width=1235,height=530');
                }
                else {
                    alert("Erreur: "+xhr.responseText);
                }
            };
            xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );

            // Attach the data to the request as binary
            xhr.sendAsBinary( formData );

您可以在我的 Github project 文件 maskToFb.html 中查看完整的工作示例

【讨论】：