Получение цвета из внешнего изображения с помощью JavaScript

Итак, я пытался найти это во многих местах, но еще не нашел ответа для своей ситуации.

У меня есть цикл, зацикливающий каждый час дня и каждый день года, и с помощью множества безумно нелепых математических уравнений получающий угол и расстояние до солнца в определенном месте.

Результат уравнений дает мне число, которое я использую в качестве значения x для получения цвета пикселя изображения в этой точке. Изображение представляет собой градиент: когда x=0; нет солнечного света, когда x=(1/2)imageWidth; восход/закат, когда x=imageWidth; полный солнечный свет.

У меня был этот код, работающий в Processing. Хотя я хотел бы просто использовать Processing.js, я не могу этого сделать для этого проекта. Я пытаюсь построить это с помощью D3 и Moment.

К точке:

Мне нужно выяснить, как выбирать цвета из пикселей внешнего (не видимого) изображения, используя значение, которое я получаю из уравнений как значение x для изображение.

У меня есть ценность, которая мне нужна. Мне просто нужна помощь в выяснении, как получить цвет пикселя изображения, который не виден в определенном месте x этого изображения. Затем я использую этот цвет в качестве цвета заливки круга.

Я понимаю, что это не может быть сформулировано идеально. Довольно сложно поднять голову от написания нелепых математических уравнений на JavaScript, а затем задать вопросы о получении значений цвета пикселей внешнего изображения. Но я надеюсь, что кто-то там может помочь мне!

РЕДАКТИРОВАНИЕ: все это станет веб-страницей.


javascript d3.js momentjs image-processing getpixel
person brettwbyron    schedule 03.11.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Есть 2 способа сделать это - в Javascript и в .Net

Используя Javascript, вы рисуете изображение на холсте, а затем используете метод getImageData():

var img = new Image();
img.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(img, 0, 0);
data = context.getImageData(x, y, 1, 1).data;

http://msdn.microsoft.com/en-us/library/ie/ff975418(v=vs.85).aspx

В .Net также есть полезный метод Bitmap.GetPixel. Если у вас есть доступ к .Net, возможно, стоит написать или вызвать исполняемый файл для запуска этого метода и сохранения значения в таблице в виде отдельного процесса, например. консольный AP или вызвать exe напрямую, передавая переменные среды. Извините, если о .Net не может быть и речи, поскольку я знаю, что это косвенный ответ на ваш вопрос.

http://msdn.microsoft.com/en-us/library/system.drawing.bitmap.getpixel(v=vs.110).aspx

В пространстве имен system.drawing вы можете объявить цвет, а затем сравнить его, чтобы увидеть, соответствует ли он тому, что на изображении.

public Color GetPixel(
    int x,
    int y
)

private void GetPixel_Example(PaintEventArgs e)
{
    // Color to compare
    Color compareColor = Color.Blue;

    // Create a Bitmap object from an image file.
    Bitmap myBitmap = new Bitmap("YourImage.jpg");

    // Get the color of a pixel within myBitmap.
    Color pixelColor = myBitmap.GetPixel(50, 50);

    If(pixelColor == compareColor)
    {
        //do something
    }
}
person Robert Anderson    schedule 03.11.2014
comment
К сожалению, все это должно быть JavaScript, HTML и CSS. Ничего больше. Я хотел бы использовать .NET, C++, Python и т. д. Но я ограничен JS, HTML и CSS. - person brettwbyron; 04.11.2014
comment
Привет, я обновил свой ответ с помощью метода javascript getImageData(). - person Robert Anderson; 04.11.2014
comment
Таким образом, использование getImageData() извлекает каждый пиксель изображения и не показывает изображение. Это правильно? Кроме того, как я могу получить из этого определенный цвет пикселя? - person brettwbyron; 04.11.2014
comment
Привет, да, это правильно - метод getImageData использует холст и копирует пиксельные данные в прямоугольник. Вы можете увидеть, как можно изменить каждый пиксель, используя метод putImageData. Например, в следующей ссылке он инвертирует цвет каждого пикселя, а затем снова рисует его, используя putImageData. w3schools.com/tags/canvas_getimagedata.asp Вы можете получить цвета пикселей из RGBA значения, хранящиеся в объекте ImageData. - person Robert Anderson; 17.11.2014