javascript - 使用 JavaScript 从外部图像获取颜色

Question

所以，我已经尝试在很多地方查找它，但还没有找到适合我的情况的答案。

我有一个循环，在一年中的每一天，一天中的每个小时循环，并且使用许多疯狂荒谬的数学方程式，得到太阳在特定位置的 Angular 和距离。

方程式的结果为我提供了一个数字，我将其用作 x 值 以获得图像在该点的像素颜色。图像是渐变的:当x=0时；没有阳光，当x=(1/2)imageWidth；日出/日落，当 x=imageWidth；充足的阳光。

我在 Processing 中使用了这段代码。虽然我很想只使用 Processing.js，但我不能用于这个项目。我正在尝试使用 D3 构建它和 Moment图书馆。

重点:

我需要弄清楚如何从外部(不可见)图像的像素中挑选颜色，使用我从方程式中获得的值作为 图片的 x 值。

我有我需要的值(value)。我只需要帮助弄清楚如何获取在该图像的特定 x 位置不可见的图像像素的颜色。然后，我将使用该颜色作为圆圈的填充颜色。

我意识到这可能措辞不理想。很难从用 JavaScript 编写荒谬的数学方程式中抬起头来，然后问有关获取外部图像像素颜色值的问题。但是，我希望有人能帮助我!

编辑:这一切最终都会成为一个网页。

Answer 1

有 2 种方法可以实现 - 在 Javascript 和 .Net 中

使用 Javascript，您在 Canvas 中绘制图像，然后使用 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
    }
}