Javascript 获取 Facebook 个人资料图像像素数据答案

【问题标题】：Javascript Get Facebook Profile Image Pixel DataJavascript 获取 Facebook 个人资料图像像素数据
【发布时间】：2015-12-18 14:33:32
【问题描述】：

我需要从随机用户的 Facebook 个人资料图片中获取像素数据，以便通过 Emscripten 将其传递给我们的 C++ 应用程序。也就是说，我需要每个像素的 RGB 值。我尝试了很多不同的方法，使用 Javascript FBSDK、图形调用、下载图像，并尝试绘制到我创建的画布上，但我遇到了各种各样的问题，例如跨域问题。我不需要将它渲染到可见的画布上，我只需要将脚趾数据传回我们的应用程序。

请问有什么简单的方法吗？

【问题讨论】：

跨域限制不是基于你是否需要它是“可见的”。如果 Facebook 没有返回那些启用了 CORS 的图像，那么您就无法在客户端执行此操作。
我可以加载图像、创建画布、将图像绘制到画布上，但是一旦我在画布上下文中调用 getImageData，就会收到安全错误 - 画布已被交叉污染-来源数据。如果图像存储在本地，它可以正常工作，所以我相信我们可以使用代理服务器（慢），或者在本地写入图像并重新加载（如果用户不允许，可能会导致问题）。请问大家还有什么其他办法吗？

标签： javascript facebook image profile emscripten

【解决方案1】：

您可以从 Facebook 获取图像像素数据，通过 Ajax 请求而不是 img 标签获取图像。

具体来说，您可以：

使用XMLHttpRequest 获取图像数据
将数据打包到Blob
将Image 的src 设置为blob 的对象URL
加载图像时，将图像放在画布上，使用画布上下文的drawImage
使用上下文的getImageData获取像素数据

下面。代码适用于我，在 Chrome 上，没有任何安全问题

document.addEventListener('DOMContentLoaded', function() {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'arraybuffer';
  xhr.addEventListener("load", onResponse);
  xhr.open("GET", "http://graph.facebook.com/61308470/picture");
  xhr.send();

  var image = new Image();
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  function onResponse() {
    var blob = new Blob([xhr.response], {type: 'image/jpeg'});
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    image.src = url;
  }

  image.onload = function() {
    context.drawImage(image, 0, 0);
    var data = context.getImageData(0, 0, 50, 50).data;

    // Pixel data of the image
    console.log(data);

    // Cleanup
    (window.URL || window.webkitURL).revokeObjectURL(url);
  }
});

你可以在http://plnkr.co/edit/fEwoIQRQhaCDRHkwNdvr?p=preview看到这个

作为参考，看起来 Facebook 个人资料图片确实设置了跨域 ajax 的标题。具体来说，响应集access-control-allow-origin: *。

我基于this answer to "Using raw image data from ajax request for data URI"

【讨论】：