解决Base64图片经Graph API分享至Facebook的点击无响应问题

我明白你遇到的糟心问题——调试时一切正常，一点分享按钮就掉链子，这种时序相关的bug确实头疼。先来看下你的代码，然后咱们一步步拆解问题，给出修复方案：

你的原始代码 #

window.fbAsyncInit = function () { 
  FB.init({ "appId": '338935439835732', "xfbml": true, "version": 'v2.8' }); 
}; 

(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/sdk.js"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

$("#btnfacebook").on('click', function () { 
  debugger; 
  var data = getCanvas.toDataURL("image/png").replace(/^data:image\/png/, "data:application/octet-stream"); 
  var blob; 
  try { 
    var byteString = atob(data.split(',')[1]); 
    var ab = new ArrayBuffer(byteString.length); 
    var ia = new Uint8Array(ab); 
    for (var i = 0; i < byteString.length; i++) { 
      ia[i] = byteString.charCodeAt(i); 
    } 
    blob = new Blob([ab], { "type": 'image/png' }); 
  } catch (e) { 
    console.log(e); 
  } 
  var fd = new FormData(); 
  fd.append("source", blob); 
  fd.append("message", "Photo Text"); 
  FB.login(function () { 
    var auth = FB.getAuthResponse(); 
    alert(auth.accessToken); 
    $.ajax({ 
      url: "https://graph.facebook.com/" + auth.userID + "/photos?access_token=" + auth.accessToken, 
      type: "POST", 
      data: fd, 
      processData: false, 
      contentType: false, 
      cache: false, 
      success: function (data) { 
        console.log("success " + data); 
      }, 
      error: function (shr, status, data) { 
        console.log("error " + data + " Status " + shr.status); 
      }, 
      complete: function () { 
        console.log("Ajax Complete"); 
      } 
    }); 
  }, { scope: 'publish_actions' }); 
}); 

问题根源分析 #

• API版本过于陈旧：你用的v2.8版本早被Facebook弃用了，旧版本的API存在兼容性问题，很多接口逻辑已经失效。
• 权限名称过时：publish_actions权限早就被移除了，现在个人账号应该用publish_posts，而且这个权限需要符合Facebook的平台政策，可能需要申请审核。
• 未处理授权失败场景：你直接在FB.login回调里拿auth，但如果用户取消授权，auth会是undefined，直接用会报错。
• 冗余的Base64转换：把data:image/png改成application/octet-stream完全没必要，反而可能在某些情况下破坏Base64结构。
• 弹窗拦截风险：手动转Blob的过程太快，浏览器可能会把FB.login的授权弹窗判定为非用户主动触发的弹窗而拦截；调试时因为断点延迟了执行，浏览器才允许弹窗显示。

修复后的代码 #

我调整了代码逻辑，解决了上述问题，同时用更可靠的FB.api替代jQuery ajax来处理上传：

window.fbAsyncInit = function () {
  FB.init({
    appId: '338935439835732',
    xfbml: true,
    version: 'v18.0' // 升级到最新稳定版本
  });
};

(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/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

$("#btnfacebook").on('click', function () {
  // 替换成你的Canvas元素ID
  const canvas = document.getElementById('your-canvas-id');
  if (!canvas) {
    console.error('找不到Canvas元素');
    return;
  }

  // 直接用Canvas原生的toBlob方法生成Blob，避免手动转码
  canvas.toBlob(function(blob) {
    if (!blob) {
      console.error('无法从Canvas生成Blob');
      return;
    }

    FB.login(function(response) {
      // 先检查用户是否授权成功
      if (response.authResponse) {
        const formData = new FormData();
        formData.append('source', blob);
        formData.append('message', 'Photo Text');

        // 使用FB.api上传，内置处理跨域和授权
        FB.api(
          `/${response.authResponse.userID}/photos`,
          'POST',
          formData,
          function(apiResponse) {
            if (!apiResponse || apiResponse.error) {
              console.error('上传失败:', apiResponse?.error || '未知错误');
            } else {
              console.log('上传成功！照片ID:', apiResponse.id);
            }
          }
        );
      } else {
        console.log('用户取消了授权或授权失败');
      }
    }, { scope: 'publish_posts' }); // 使用最新的发布权限
  }, 'image/png');
});

额外建议：用分享对话框替代直接上传 #

如果你的应用是面向普通用户的，Facebook现在对publish_posts权限限制非常严格，大概率无法通过审核。这种情况下，推荐使用官方的分享对话框，不需要任何发布权限，还能避免弹窗拦截问题：

$("#btnfacebook").on('click', function () {
  const canvas = document.getElementById('your-canvas-id');
  if (!canvas) {
    console.error('找不到Canvas元素');
    return;
  }

  // 先把Canvas图片上传到你自己的服务器，获取可公开访问的URL
  canvas.toBlob(function(blob) {
    const formData = new FormData();
    formData.append('image', blob);
    
    // 调用你自己的上传接口，拿到图片的公开URL
    $.ajax({
      url: '你的图片上传接口地址',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(imageUrl) {
        // 弹出Facebook官方分享对话框
        FB.ui({
          method: 'share',
          href: '你的网页URL', // 分享时显示的网页链接
          picture: imageUrl,   // 要分享的图片URL
          description: 'Photo Text'
        }, function(response) {
          if (response && !response.error_message) {
            console.log('分享成功');
          } else {
            console.log('分享取消或失败');
          }
        });
      }
    });
  }, 'image/png');
});

内容的提问来源于stack exchange，提问作者vivek jaiswal