4

我有一个网站，用户可以在其中设计智能手机外壳。在某一时刻，用户应该能够在 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' 等。

4

1 回答 1

1

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

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

获得解码图像后，您可以将其放入表单中并通过 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 );

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

于 2014-09-17T22:54:04.643 回答