如何通过从数据库中获取像素值来为图像着色

Posted 2023-02-25

【中文标题】如何通过从数据库中获取像素值来为图像着色

【英文标题】：how to color image by taking pixel values from database

【发布时间】：2018-10-11 05:32:09

【问题描述】：

我想制作一张热图，为此我从谷歌地图中捕获了一张图像并划分为网格，例如

现在，我想根据居住在该网格中的人数为特定网格着色。例如， 如果在网格 7,5 没有。的居民是 7k+ 用红色给它上色。 4k到7k，用橙色着色。 小于4k，用黄色着色。

有什么办法可以做到这一点。 附言。这是一个网络应用程序。 谢谢你的建议。

【参考方案1】：

如果你的数据是二维数组，像这样：

data = [ [6323, 9538, 1043, 1023, 4029],
         [3912, 5921, 4893, 9836, 2994],
         ... ];

然后只需循环创建一个具有相关颜色的相同大小的二维数组：

colors = [data.length][data[0].length]
for (let row = 0; row < data.length; row++) 
    let colorRow = []
    for (let col = 0; col < data[0].length; col++) 
        if data[row][col] > 7000 
            colorRow.append('red');
         else if data[row][col] > 4000 
            colorRow.append('orange');
         else 
            colorRow.append('yellow');
        
    
    colors.append(colorRow);

然后您可以访问矩阵中任何特定单元格的颜色，并使用该信息做任何您需要的事情：

color = colors[0][2] //returns 'red' for 9538

【讨论】：

对不起，我是编程新手，但我没有看到任何像素值，我必须在其中放置颜色，因为我只有一张图像...... ?

啊，你的问题含糊不清。我建议使用 P5.js。您可以加载图像，并为单个像素着色。

谢谢……我用的是heatmap.js……但是社区对它的支持不太好……p5.js的社区支持怎么样？？跨度>

我不确定，但他们网站上的文档和示例都很好，而且从设计上讲，它真的很容易使用。