Vue获取图片的三合一直方图

梧杵

已于 2022-06-17 23:12:29 修改

阅读量992

点赞数

分类专栏： # vue 前端文章标签： vue.js javascript 前端

于 2022-06-17 23:11:04 首次发布

本文链接：https://blog.csdn.net/qq_43378689/article/details/125341519

版权

前端同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

成果展示

在这里插入图片描述

HTML文件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩色图像的直方图计算</title>
    <style>
        h1 {
            text-align: center;
        }
 
        p {
            float: right;
        }
 
        #myCanvas {
            display: block;
            margin: 0 auto;
        }
 
        .container {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
        }
 
        @media screen and (min-width:300px) {
            .echart-box {
                width: 100%;
                height: 500px;
            }
        }
 
        @media screen and (min-width:768px) {
            .echart-box {
                width: 45%;
                height: 500px;
            }
        }
 
        @media screen and (min-width:1024px) {
            .echart-box {
                width: 30%;
                height: 500px;
            }
        }
    </style>
</head>
 
<body>
    <div>
        <h1>彩色图像的直方图计算</h1>
        <p>假如皮卡会coding</p>
        <input type="file" id="imageInput" /><br>
        直方图区间数：
        <input type="number" id="numInput" value="64"> （x>0&&x<=256） </div> <canvas id="myCanvas" width="600"
            height="600"></canvas>
            <div class="container">
                <div class="echart-box" id="rchart"></div>
                <div class="echart-box" id="gchart"></div>
                <div class="echart-box" id="bchart"></div>
            </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>
    <script src="./js/calculateColor.js"></script>
</body>
 
</html>

JS文件

(function () {
    var imageInput = document.getElementById("imageInput"); //获取输入按钮
    var numInput =document.getElementById("numInput");
    var myCanvas = document.getElementById("myCanvas"); //获取canvas
    var cxt = myCanvas.getContext('2d'); //获取上下文
    var img = new Image(); //定义图像对象
    var pxData = null; //定义存储像素的数组
    var rNumber = new Array(256).fill(0); //定义每一个像素点中R通道值的出现次数
    var gNumber = new Array(256).fill(0); //定义每一个像素点中R通道值的出现次数
    var bNumber = new Array(256).fill(0); //定义每一个像素点中R通道值的出现次数
 
    var rangeNum = 64;//显示直方图的频段
 
    //读取文件后的回调函数
    imageInput.onchange = function () {
        // img = new Image();
        var file = this.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                img.src = e.target.result; //修改图像数据
            };
        }
    };
    numInput.onchange = function(){
        rangeNum = parseInt(numInput.value);
        if(pxData){
            // console.log(rNumber);
            display(rNumber,gNumber,bNumber);
        }
    }
    //图片读取完毕后，写到canvas里面
    img.onload = function () {
        cxt.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
        var imgData = cxt.getImageData(0, 0, myCanvas.width, myCanvas.height);
        pxData = imgData.data; //获取每一个像素
        console.log("imgData", pxData);
 
        // 统计每一个像素点的RGB三通道
        rNumber = new Array(256).fill(0);
        gNumber = new Array(256).fill(0);
        bNumber = new Array(256).fill(0);
 
        for (let i = 0; i < pxData.length; i += 4) {
            rNumber[pxData[i]]++;
            gNumber[pxData[i + 1]]++;
            bNumber[pxData[i + 2]]++;
        }
        console.log("rNumber:", rNumber);
        console.log("gNumber:", gNumber);
        console.log("bNumber:", bNumber);
        display(rNumber,gNumber,bNumber);
  
    }

    function get(data){
        let displayData = new Array(rangeNum).fill(0);
        let delt = Math.ceil(256/rangeNum);
        for(let i=0;i<rangeNum;i++){
            for(let j=0;j<delt;j++){
                displayData[i] += data[i*delt+j];
            }
        }
        return displayData;
    }

    function getRanges(){
        let ranges = new Array(rangeNum).fill(0);
        for(let i=0;i<rangeNum;i++){
            ranges[i] = i ;
        }
        return ranges;
    }
    function display(data1,data2,data3) {
        let ranges = getRanges();
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("rchart"));
        data1 = get(data1);
        data2 = get(data2);
        data3 = get(data3);
        ranges = getRanges();
        // console.log(ranges);
        myChart.setOption({
            title: {
                text: "RGB直方图",
            },
            tooltip:{},//悬浮显示
            xAxis: {
                data: ranges
            },
            yAxis: {
                type:"value",//y轴显示区间分量的个数
            },
            series: [
                {
                    name: '个数',
                    type: 'bar',
                    color:['#ff0000'],
                    stack: 'ad',
                    data: data1
                },
                {
                    name: '个数',
                    type: 'bar',
                    color:['#00ff00'],
                    stack: 'ad',
                    data: data2
                },
                {
                    name: '个数',
                    type: 'bar',
                    color:['#0000ff'],
                    stack: 'ad',
                    data: data3
                },

        ]
        },rangeNum);
    }
})();