python+jQuery 实现颜色比重分析
1.使用到的python库
time
webbrowser
cv2
collections
2.创作思路：利用cv2库中的方法逐行扫描图片的每一个像素点，获取每一个像素点的 rgb值 并进行信息的处理，串联成一个巨大的array，接着利用collections中的Counter对象，对收集到的图片信息进行统计排序，最终将会产生一个经过排序的字典，由于未处理的数据将会返回所有的结果以及对应的出现次数，所以对此增加了一个处理
Counter©.most_common(5) 例如这样将会返回排位 前5 的数
接着将信息写入一个本地的results.txt文件
之后就是jquery的发生，通过对 txt文件的处理，对字符串进行处理巴拉巴拉，并进行渲染，即可获得所需要的信息；
下面展示一些 内联代码片。
import time
import webbrowser
from cv2 import cv2
from collections import Counter
file_handle1=open('results.txt', mode='w') #打开txt文件
print('作者：洛杉矶柠檬人')
print('分析程序开始!!!!!!!!!!!!!!!!')
print('--------------------------------------')
print("请输入图片路径，例如 test01.jpg 或者 C:\\Users\\Shuinane\\Pictures\\test01.jpg")
x = input("请输入图片路径:")
pic_path = x #图片路径
time_start=time.time() #计时开始
img = cv2.imread(pic_path) #读取图片
b, g, r = cv2.split(img) # 默认BGR转换为RGB
img2 = cv2.merge([r, g, b])
print('图片高度:'+str(img2.shape[0])+'px') #打印高度
print('图片宽度:'+str(img2.shape[1])+'px') #打印宽度
print('正在分析中...')
#读取图片rgb信息代码，生成一个每个点的rgb列表
c = []
for x in range(img2.shape[0]):
for y in range(img2.shape[1]):
c.append(str(img2[x, y][0])+','+str(img2[x, y][1])+','+str(img2[x, y][2]))
a = len(c)
print('图片大小:'+str(a)+'px') #通过计算c列表的长度得到图片的大小 即 列表的长度 == 像素点的个数 == 图片的大小
print('色彩种类:'+str(len(list(Counter(c))))) #通过计算counter(c)列表的长度得到图片的色彩数量 即 列表的长度 == 图片的色彩数量
print("请输入展示色彩数量，将自动为您降次排列。 ")
y=input("请输入展示色彩数量:")
file_handle1.write(str(Counter(c).most_common(int(y)))) #修改数字 ，你即可获取对应色彩数量（递减排列），例如你输入 10 则返回排列前 10 的颜色信息 ，输入 a 则 返回所有出现过的颜色
file_handle1.write('!'+str(a)+'!')
time_end = time.time()
print('分析耗时：', time_end-time_start, 's')
print('分析程序结束!!!!!!!!!!!!!!!!!!')
print('开始浏览器端渲染，数据信息也可在 results.txt 内查看')
print('--------------------------------------')
file_handle1.close()
webbrowser.open("run.html")
print('回车键结束程序')
end=input('')<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>色彩比重图</title>
<script src="jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
div {
display: flex;
flex-wrap: wrap;
}
span {
position: relative;
border: 1px dotted white;
height: 120px;
width: 120px;
background-color: #bfbfbf;
overflow: hidden;
}
a:nth-child(1) {
text-align: center;
line-height: 35px;
position: absolute;
top: 0;
width: 120px;
height: 35px;
font-weight: bolder;
}
a:nth-child(2) {
text-align: center;
line-height: 35px;
position: absolute;
bottom: 0;
width: 120px;
height: 35px;
display: none;
}
</style>
</head>
<body>
<input type="file" onchange="upload(this)"/>
<div>
</div>
</body>
<script>
function upload(input) { //支持chrome IE10
$('input').hide();
alert('频率 从左至右 由上到下 依次递减，数据量大的话，请耐心等待色块的生成！')
if (window.FileReader) {
var file = input.files[0];
filename = file.name.split(".")[0];
var reader = new FileReader();
reader.onload = function() {
var alldots = this.result.split('!')
console.log(alldots[1])
var matchReg = /'.*?\'/gi; //所有的像素点
for (let i=0; i< this.result.substring(0, this.result.length - 1).slice(1).split('),').length; i++) {
$("div").append(
'<span><a>1</a><a>2</a></span>'
);
}
$('span').mouseover(function () {
$($(this)[0].children[1]).show();
$($(this)[0].children[1]).html($(this).attr('bkc'));
});
$('span').mouseleave(function () {
$($(this)[0].children[1]).hide();
});
for (let i=0; i< this.result.substring(0, this.result.length - 1).slice(1).split('),').length; i++) {
$($("div")[0].children[i]).css('background-color', 'rgb('+this.result.substring(0, this.result.length - 1).slice(1).split('),')[i].match(matchReg)[0].substr(0, this.result.substring(0, this.result.length - 1).slice(1).split('),')[i].match(matchReg)[0].length-1).substring(1)+')').attr('bkc', this.result.substring(0, this.result.length - 1).slice(1).split('),')[i].match(matchReg)[0].substr(0, this.result.substring(0, this.result.length - 1).slice(1).split('),')[i].match(matchReg)[0].length-1).substring(1));
m = this.result.split('!')[0].substr(1).substring(0,this.result.split('!')[0].substr(1).length-1).split(")")[i].split("',")[1]
console.log(m)
console.dir($('div')[0].children[i].children[0]);
$($('div')[0].children[i].children[0]).html(Math.round(Number(m)/Number(alldots[1]) * 10000)/100.00+'%');
if(Math.round(Number(m)/Number(alldots[1]) * 10000)/100.00+'%' == '0%'){
$($('div')[0].children[i].children[0]).html('几乎为 0%');
}
}
}
reader.readAsText(file);
}
// //支持IE 7 8 9 10
// else if (typeof window.ActiveXObject != 'undefined'){
// var xmlDoc;
// xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
// xmlDoc.async = false;
// xmlDoc.load(input.value);
// alert(xmlDoc.xml);
// }
// //支持FF
// else if (document.implementation && document.implementation.createDocument) {
// var xmlDoc;
// xmlDoc = document.implementation.createDocument("", "", null);
// xmlDoc.async = false;
// xmlDoc.load(input.value);
// alert(xmlDoc.xml);
// } else {
// alert('error');
// }
}
</script>
</html>链接:
https://pan.baidu.com/s/1QARO1zxsptNjkJwNK336dg
提取码：1119
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
