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

成果展示

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"); //获取canvasvar 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);}
})();

Vue获取图片的三合一直方图相关推荐

vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码重点就是:style="{background: ...
vue获取后台的文件流并且转换成图片
vue获取后台的文件流并且转换成图片 1.添加request的responseType export function addCode(Equip,data) { return request({ m ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
Vue由本地js中存放的url地址获取图片
Vue由本地js中存放的url地址获取图片对象必须放在js中(而不是json里面,json没有require).如果是在json中,需要采用其他方式去获取注意:url地址必须用这种形式,有requ ...
vue 如何获取图片的原图尺寸_js获取图片信息（一）-----获取图片的原始尺寸
如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } 方法一: HTML5提 ...
blob二进制显示在html,使用Blob获取图片并二进制显示实例页面
HTML代码: JS代码: var eleAppend = document.getElementById("forAppend"); window.URL = window.UR ...
vue-preview动态获取图片宽高并增加旋转功能
vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件: 我在项目中也用过这个插件,总体来说,还是比较满意.但是缺少一个图片旋转功能. 安装使用第一步:安装 npm i vue-p ...
vue java图片懒加载_vue 实现图片懒加载功能
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. npm install vue-lazyload --save-dev 2, ...
Vue本地图片循环加载显示不出来，vue img标签 :src地址拼接
Vue本地图片循环加载显示不出来,vue img标签 :src地址拼接上代码: <img:src="img"alt="banner" /> dat ...

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

成果展示

HTML文件

JS文件

Vue获取图片的三合一直方图相关推荐

最新文章

热门文章