Getting color from external image using JavaScript

问题

So, I have tried looking this up in many places, but have not yet found an answer for my situation.

What I have is a loop, looping for each hour in a day for every day in a year, and, with many insanely ridiculous mathematical equations, getting the angle and distance of the sun at a specific location.

The outcome of the equations gives me a number that I use as an x value to obtain to the image's pixel color at that point. The image is a gradient: when x=0; no sunlight, when x=(1/2)imageWidth; sunrise/sunset, when x=imageWidth; full sunlight.

I had this code working in Processing. Though I would love to just use Processing.js, I am unable to for this project. I am trying to build this with the D3 and Moment libraries.

To the point:

I need to figure out how to pick colors from the pixels of an external (not visible) image, using a value I obtain from equations as the x value of the image.

I have the value I need. I just need help figuring out how to get the color of the pixel of an image that is not visible at the specific x location of that image. I will then use that color as a fill color for a circle.

I realize this may not be worded ideally. It is kind of difficult to lift my head up from writing ridiculous math equations in JavaScript, and then ask questions about obtaining pixel color values of an external image. But, I hope someone out there can help me out!

EDIT: This all will end up as a webpage.

回答1:

There are 2 ways to do it - in Javascript and in .Net

Using Javascript, you draw the image in a canvas and then use the getImageData() method:

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

There also is a useful method in .Net called the Bitmap.GetPixel method. If you have access to .Net, it may be worthwhile writing or calling an executable to run this method and store the value in a table, as a separate process - e.g. a console ap or call the exe directly passing environment variables. Apologies if .Net is out of the question, as I know this is an indirect answer to your question.

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

In the system.drawing namespace, you can declare a color and then compare the color to see if it is the one in the image.

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

来源：https://stackoverflow.com/questions/26724060/getting-color-from-external-image-using-javascript

标签

javascript

image-processing

d3.js

momentjs

getpixel