Как получить данные изображения из внешнего url - и вернуть цвета

Question

Im using clusterfck.js для анализа и возврата цветов. Я не собираюсь фотографировать изображения из результатов поиска, но, похоже, проблема связана с тем, как clusterfck выполняет чтение данных. Вот код из 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; 
} 

Я попытался положить в img.crossOrigin = "Anonymous"; без везения. Я предполагаю, что он должен быть загружен в функцию af и как-то обратный цвет. Это лучшее, что я мог придумать, но он не работает.

$(".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; 
} 

Я предполагаю, что он не может получить доступ к данным, не загружая их в изображение на внешнем сервере. Что я скучаю по ней? Может, я все понял?

Answer 1

Спасибо за ваши комментарии! Я получил теперь работает с функцией обратного вызова :-)

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; 
}