python+jQuery 实现图片颜色比重分析

最新推荐文章于 2023-10-11 11:12:03 发布

洛杉矶柠檬人

最新推荐文章于 2023-10-11 11:12:03 发布

阅读量932

点赞数

文章标签： python js

本文链接：https://blog.csdn.net/weixin_44640701/article/details/109319672

版权

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>