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

Question

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

请问有简单的方法吗？

Answer 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: * 。

我基于“使用来自Ajax请求数据URI的原始图像数据”的答案