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");

どれも機能していないようです。「rel」などを読み取ることができるため、「fblink」オブジェクトは正しいです。

4

1 に答える 1

1

私が個人的に使用canvas.toDataURL()したのは、キャンバス コンテンツの base64 でエンコードされた URL を生成するものです。

その後、次のコマンドを使用して URL をデコードしましたBase64Binary.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 に答える