Question

我一直在尝试合并此代码：https://github.com/lukasz-madon/heroesgenerator

以下是他提供的样本：http://www.heroesgenerator.com/

我有一个绘图板，并希望有一个按钮将图纸发送到Facebook，但它给了我这个错误信息：

＆＃34;应用程序配置不允许使用URL：应用程序的设置不允许使用一个或多个给定的URL。它必须与网站URL或Canvas URL匹配，或者域必须是App域之一的子域。＆＃34;

我不确定会出现什么问题，但这可能是愚蠢的。这是我的一些代码：

<button class="share" onclick="postCanvasToFacebook()">Share event on Facebook</button>

<div id="fb-root">
<canvas id="canvasPic"></canva
</div>

此canvasPic是绘图的位置。

然后我将他的base64binary.js文件直接复制并链接到html文件中。

然后我有他的script.js文件，但已修改。我改变的很少 - 我只删除了绘制新画布的部分，并将画布的id更改为＆＃34; canvasPic＆＃34;：

// from: http://stackoverflow.com/a/5303242/945521
if ( XMLHttpRequest.prototype.sendAsBinary === undefined ) {
    XMLHttpRequest.prototype.sendAsBinary = function(string) {
        var bytes = Array.prototype.map.call(string, function(c) {
            return c.charCodeAt(0) & 0xff;
        });
        this.send(new Uint8Array(bytes).buffer);
    };
};

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit = function() {
    FB.init({
      appId  : "404477149649756",
      status : true, 
      cookie : true, 
      xfbml  : true  // parse XFBML
    });
};

function postImageToFacebook( authToken, filename, mimeType, imageData, message )
{
    // this is the multipart/form-data boundary we'll use
    var boundary = '----ThisIsTheBoundary1234567890';   
    // let's encode our image file, which is contained in the var
    var formData = '--' + boundary + '\r\n'
    formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
    formData += 'Content-Type: ' + mimeType + '\r\n\r\n';
    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\n\r\n';
    formData += message + '\r\n'
    formData += '--' + boundary + '--\r\n';

    var xhr = new XMLHttpRequest();
    xhr.open( 'POST', 'https://graph.facebook.com/me/photos?access_token=' + authToken, true );
    xhr.onload = xhr.onerror = function() {
        console.log( xhr.responseText );
    };
    xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );
    xhr.sendAsBinary( formData );
};

var canvasPic = document.getElementById("canvasPic");

var authToken;

function postCanvasToFacebook() {
    var data = canvasPic.toDataURL("image/png");
    var encodedPng = data.substring(data.indexOf(',') + 1, data.length);
    var decodedPng = Base64Binary.decode(encodedPng);
    FB.getLoginStatus(function(response) {
      if (response.status === "connected") {    
        postImageToFacebook(response.authResponse.accessToken, "DrawIt", "image/png", decodedPng, "http://www.fishfactorymedia.com/DrawIt/draw.html");
  } else if (response.status === "not_authorized") {
     FB.login(function(response) {
        postImageToFacebook(response.authResponse.accessToken, "DrawIt", "image/png", decodedPng, "http://www.fishfactorymedia.com/DrawIt/draw.html");
     }, {scope: "publish_stream"});
  } else {
     FB.login(function(response)  { 
        postImageToFacebook(response.authResponse.accessToken, "DrawIt", "image/png", decodedPng, "http://www.fishfactorymedia.com/DrawIt/draw.html");
     }, {scope: "publish_stream"});
  }
 }); 

};

从网站发送画布图像到Facebook

0 个答案: