使用JavaScript从外部图像获取颜色 [英] 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.

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

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.

我在处理中使用了此代码.尽管我只想使用Processing.js，但我无法进行该项目.我正在尝试使用 D3 和时刻库.

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.

要点:

我需要使用从等式中获得的值作为，从外部(不可见)图像的像素中找出如何选择颜色图片的x值.

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.

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

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.

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

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.

推荐答案

有两种方法可以做到这一点-在Javascript和.Net中

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

使用Javascript，您可以在画布上绘制图像，然后使用getImageData()方法:

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

.Net中还有一个有用的方法，称为Bitmap.GetPixel方法.如果您可以访问.Net，则可能值得编写或调用可执行文件以运行此方法并将值存储在表中，作为一个单独的过程-例如控制台ap或直接通过环境变量调用exe.如果无法使用.Net表示歉意，因为我知道这是您问题的间接答案.

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/zh-CN/library/system.drawing.bitmap.getpixel(v=vs.110).aspx

在system.drawing命名空间中，您可以声明一种颜色，然后比较该颜色以查看它是否在图像中.

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

这篇关于使用JavaScript从外部图像获取颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！