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

时间:2014-11-03 22:02:15

标签: javascript image-processing d3.js momentjs getpixel

所以,我试过在很多地方看过这个问题,但还没有找到适合我情况的答案。

我所拥有的是一个循环,一年中每天每小时循环一次,并且,通过许多疯狂荒谬的数学方程式,获得太阳在特定位置的角度和距离。

方程的结果给出了一个我用作x值的数字,以获得该点处图像的像素颜色。图像是梯度:当x = 0时;当x =(1/2)imageWidth时没有阳光;日出/日落,当x = imageWidth;充满阳光。

我在Processing中使用了这段代码。虽然我很乐意只使用Processing.js,但我无法参与这个项目。我正在尝试使用D3Moment库来构建它。

重点:

我需要弄清楚如何从外部(可见)图像的像素选择颜色,使用我从等式中获得的值作为图像的x值

我有我需要的价值。我只需要帮助找出如何获得在该图像的特定x位置看不到的图像像素的颜色。然后,我将将该颜色用作圆圈的填充颜色

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

编辑:这一切都将以网页结尾。

1 个答案:

答案 0 :(得分:1)

有两种方法可以做到 - 在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
    }
}