如何量化一张图片的色彩关系？

↑ 点击加入mixlab社区

15000+跨学科人群，机器学习、机器视觉、自然语言处理、知识图谱、量化交易、物联网、区块链、产品经理、交互设计、建筑设计、服装设计、珠宝设计、平面设计、音乐、艺术等。

上一期讲到Brandmark提出了一种表达色彩比例及关系的数据结构，无向色彩节点图，见下图：

本文详细介绍这一表达方式，及相关的实现代码。

阅读难度：★★★☆☆

技能要求：JS基础、数学基础

字数：800字

阅读时长：4分钟

我们先了解下何为Color quantization？

中文为色彩量化（点击查看详情介绍）。

色彩量化简单来说，就是压缩颜色，使颜色可以量化的一种方法。这听起来是不是类似于之前介绍过的MCCQ算法？没错，MCCQ就是色彩量化中的一种算法。Brandmark采用的色彩量化库是RgbQuant.js库，然后通过图（无向色彩节点图）的方式表达。通过以下几步：

STEP1

量化图片

通过RgbQuant.js库来获取图片的色彩量化结果，这里示例获取的是3个色彩数据来压缩图片。

quantized = colorgraph.quantize(img,num,use_mode)

获得结果，包括压缩色彩后的图片及色板。

STEP2

获取色彩矩阵

（无向色彩节点图的数学表示）

adjacency = colorgraph.get_connectivity_matrix(quantized.palette, quantized.canvas, normalize)

思考下如何用计算机语言表示图？如下图：

节点跟节点之间连线的称之为“图”。

答案点击查看

计算邻接矩阵：

STEP2.1

初始化邻接矩阵

STEP2.2

遍历量化后的图片

STEP2.3

更新邻接矩阵

上图的过程，我们用文字描述一下：

一次获取4个像素点，然后获取4个像素点在色板中的位置（编号），如果任意2个像素之间的颜色不相等，则这两个节点之间接近程度+1，对应更新邻接矩阵中对应的元素数值。

代码：

for (var x=0; x<canvas.width-1; x++){

for (var y=0; y<canvas.height-1; y++){

var p1 = pixel_at(pixels, canvas.width, x, y);

var p2 = pixel_at(pixels, canvas.width, x+1, y);

var p3 = pixel_at(pixels, canvas.width, x+1, y+1);

var p4 = pixel_at(pixels, canvas.width, x, y+1);

if(!pequal(p1, p2)){

conn[pindex(palette,p1)][pindex(palette,p2)] += 1;

conn[pindex(palette,p2)][pindex(palette,p1)] += 1;

console.log(conn.toString())

}

if(!pequal(p1, p3)){

conn[pindex(palette,p1)][pindex(palette,p3)] += 1;

conn[pindex(palette,p3)][pindex(palette,p1)] += 1;

}

if(!pequal(p1, p4)){

conn[pindex(palette,p1)][pindex(palette,p4)] += 1;

conn[pindex(palette,p4)][pindex(palette,p1)] += 1;

}

if(!pequal(p2, p3)){

conn[pindex(palette,p2)][pindex(palette,p3)] += 1;

conn[pindex(palette,p3)][pindex(palette,p2)] += 1;

}

if(!pequal(p2, p4)){

conn[pindex(palette,p2)][pindex(palette,p4)] += 1;

conn[pindex(palette,p4)][pindex(palette,p2)] += 1;

}

if(!pequal(p3, p4)){

conn[pindex(palette,p3)][pindex(palette,p4)] += 1;

conn[pindex(palette,p4)][pindex(palette,p3)] += 1;

}

}

};

STEP2.4

邻接矩阵归一化处理

通过归一化处理后，我们就得到这张图片的邻接矩阵啦，一张图片的色彩关系就被量化了。

一张图片的色彩关系如何真正被机器所读懂的方法。

以上为全文。

近期活动推荐：

快！TensorFlow、黑客马拉松、DevFest千人大会 ，GDG DevFest 2018在召唤你

--------------------------------------

mixlab 无界社区 是一所面向未来的实验室，它提倡“跨界创新，开放成长”的理念。

——跨界 开放 互助 学习 思维 创新。

目前社区汇集了1500+跨学科人群，主要来自GoogleBrain、微软、华为、阿里鲁班、腾讯、旷视、三角兽、物灵科技、众安保险、美团、360等科技人才、设计师及CEO和投资人；高校分布MIT、Oxford、Cambridge、CMU、UoM、清华、上交大、同济等学生及教师群体；学科跨越机器学习、自然语言处理、量化交易、物联网、区块链、前端、后端、产品经理、UI设计、建筑设计、服装设计、珠宝设计、音乐、艺术等。

社区典型的用户技能为： ML00：小程序开发、AI+设计 ML04: 算法作曲 ML05：AI变脸 ML07：WebGL+Three.js数据可视化 ML14：增长黑客 ML16：机器学习 ML37：AR ML41：人工智能+音乐 ML44：珠宝设计+参数化设计 ML83：量化交易、数字货币交易 ML109：Arduino、processing ML113：人工智能+服装设计 ML206：VR/AR ML245：建筑设计智能化

详细介绍点击以下卡片：

mixlab期待您的加入！