如何从外部网址获取图像数据并返回颜色

Question

Im using clusterfck.js to analyze and return colors. I wan't to grap images from search-results, but it seems to be a problem with the way clusterfck does the data reading. Here's the code from clusterfck:

$(".kmeans-button").click(function() {
   if (!colors) {
      colors = getImageColors();
   }
   var k = $(this).attr("data-k"); // $.data() returned undefined
   $("#clusters").empty().append("<div>calculating distances...</div>");
   kmeans.clusterColors(colors, k); // Threaded analyzing (worker)
})

function getImageColors() {
    var img = $("#test-image");
    var width = img.width();
    var height = img.height();
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    var context = canvas.getContext("2d");
    context.drawImage(img.get(0), 0, 0);

    var data = context.getImageData(0, 0, width, height).data;
    var colors = [];
    for(var x = 0; x < width-12; x += 3) {
    for(var y = 0; y < height-12; y += 3) { // sample image, every 3rd row and column
    var offs = x*4 + y*4*width;
    var color = [data[offs + 0], data[offs + 1], data[offs + 2]];
    colors.push(color);
    }
  }
return colors;
}

I tried to put in img.crossOrigin = "Anonymous"; with no luck. I guess it needs to be loaded in af function and somehow callback colors. This is the best i could come up with, but it's not working.

$(".kmeans-button").click(function() {
   if (!colors) {
        getImageColors2(function(colors2) {
        colors=colors2.slice(0);
        var k = $(this).attr("data-k-e"); // $.data() returned undefined
        $("#clusters").empty().append("<div>calculating colors...</div>");
        kmeans.clusterColors(colors, k);
    })
}
}) 


function getImageColors2(callback) {
var img2= document.getElementById("test-image");
var img = new Image();  
img.onload = function () {
  var width = img.width();
  var height = img.height();

  var canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  var context = canvas.getContext("2d");
  context.drawImage(img.get(0), 0, 0);

  var data = context.getImageData(0, 0, width, height).data;
  var colors = [];
  for(var x = 0; x < width-12; x += 3) {
    for(var y = 0; y < height-12; y += 3) { // sample image, every 3rd row and column
     var offs = x*4 + y*4*width;
     var color = [data[offs + 0], data[offs + 1], data[offs + 2]];
     colors.push(color);
      }
    }
    callback(colors);
  }
  img.src=img2.src;
}

I assume that it can't access the data without loading into a image when on a external server. What am i missing her ? Maybe i got it all wrong ?

Answer 1

Thanks for your comments! I got it working now with the callback function :-)

function getpalette(colors) {
        $("#clusters").empty().append("<div>calculating colors...</div>");
        kmeans_paint.clusterColors(colors, k);
    }

$(".kmeans-error-button").click(function() {
    k = $(this).attr("data-k-e");

    if (!colors) {   
        getImageColors(getpalette);
    }
}) 

function getImageColors(callback) {
  var img = new Image();  
  img.setAttribute('crossOrigin', 'anonymous');
  img.onload = function () {

  var width = img.width;
  var height = img.height;

  var canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  var context = canvas.getContext("2d");
   context.drawImage(img, 0, 0);

  var data = context.getImageData(0, 0, width, height).data;
  var colors = [];
  for(var x = 0; x < width-12; x += 3) {
    for(var y = 0; y < height-12; y += 3) { // sample image, every 3rd row and column
     var offs = x*4 + y*4*width;
     var color = [data[offs + 0], data[offs + 1], data[offs + 2]];
     colors.push(color);
    }
  }
  callback(colors);
  }
img.src=document.getElementById("test-image").src;
}