我如何从外部 url 和 return 颜色获取图像数据
How do i get image data from external url - and return colors
我正在使用 clusterfck.js 分析和 return 颜色。我不想从搜索结果中抓取图像,但这似乎是 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;
}
我假设它在外部服务器上不加载到图像中就无法访问数据。我想念她什么?也许我都弄错了?
感谢您的评论!我现在可以使用回调函数:-)
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;
}
我正在使用 clusterfck.js 分析和 return 颜色。我不想从搜索结果中抓取图像,但这似乎是 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;
}
我假设它在外部服务器上不加载到图像中就无法访问数据。我想念她什么?也许我都弄错了?
感谢您的评论!我现在可以使用回调函数:-)
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;
}