JavaScript - 基于 Canvas 绘制直方图

最新推荐文章于 2023-10-29 10:26:44 发布
最新推荐文章于 2023-10-29 10:26:44 发布
阅读量580 收藏
点赞数 2
分类专栏： HTML & CSS & JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29761395/article/details/117827533
版权

文章目录


在这里插入图片描述 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas - Histogram</title>
        <style type="text/css">
            * {
                /* margin: 0;
                padding: 0; */
                box-sizing: border-box;
            }
            canvas {
                /* border-width: 1px;
                border-color: #000000;
                border-style: solid; */
            }
            .histogram {
                /* offset-x | offset-y | blur-radius | spread-radius | color */
                /* box-shadow: 0px 0px 1px 1px rgba(0, 100, 0, 0.5); */
            }
            input, label {
                cursor: pointer;
                user-select: none;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <canvas id="histogram" class="histogram"></canvas>
        
        <div>
            <input type="radio" id="original" name="color" checked />
            <label for="original">Original</label>
            
            <br />
            
            <input type="radio" id="red-weight-method" name="color" />
            <label for="red-weight-method">Red Weight Method</label>
            <input type="radio" id="green-weight-method" name="color" />
            <label for="green-weight-method">Green Weight Method</label>
            <input type="radio" id="blue-weight-method" name="color" />
            <label for="blue-weight-method">Blue Weight Method</label>
            
            <br />
            
            <input type="radio" id="mean-value-method" name="color" />
            <label for="mean-value-method">Mean Value Method</label>
            <input type="radio" id="max-value-method" name="color" />
            <label for="max-value-method">Max Value Method</label>
            <input type="radio" id="weighted-average-method" name="color" />
            <label for="weighted-average-method">Weighted Average Method</label>
            
            <br />
            
        </div>
        
        <script type="text/javascript">
            window.onload = (event) => {
                console.log(event)
                
                main()
            }
            
            function main() {
                const canvas = document.getElementById("canvas")
                const ctx = canvas.getContext("2d")
                
                const histogram = document.getElementById("histogram")
                const histogramContext = histogram.getContext("2d")
                
                const image = new Image()
                image.onload = (event) => {
                    // console.log(event, image.width, image.height)
                    
                    canvas.width = image.width
                    canvas.height = image.height
                    
                    ctx.drawImage(image, 0, 0)
                    
                    const originalImageData = ctx.getImageData(0, 0, image.width, image.height)
                    let grayImageData = null
                    
                    const grayList = new Array(256)
                    
                    document.getElementById("original").onchange = (event) => {
                        ctx.putImageData(originalImageData, 0, 0)
                    }
                    
                    // 分量法 - 红色
                    document.getElementById("red-weight-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < grayList.length; i++) {
                            grayList[i] = 0
                        }
                        
                        let gray = 0;
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            gray = originalImageData.data[i + 0] // Red Weight
                            imageData.data[i + 0] = gray // Red
                            imageData.data[i + 1] = gray // Green
                            imageData.data[i + 2] = gray // Blue
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                            
                            grayList[gray] += 1
                        }
                        
                        ctx.putImageData(imageData, 0, 0) // 重绘
                        
                        grayImageData = ctx.getImageData(0, 0, image.width, image.height) // 保存灰色图像
                        
                        // 绘制直方图
                        const sum = grayList.reduce((accumulator, currentValue, index, array) => {
                            return accumulator + currentValue
                        })
                        console.log(grayList)
                        console.log("sum = " + sum, "max = " + Math.max(...grayList), "remainder = " + Math.max(...grayList) % 100)
                        histogram.width = 256 * 2
                        histogram.height = (Math.max(...grayList) + 100 - Math.max(...grayList) % 100) / 20
                        histogramContext.strokeStyle = '#000000'
                        histogramContext.lineWidth = 1
                        for (let i = 0; i < grayList.length; i++) {
                            histogramContext.beginPath()
                            histogramContext.moveTo(i * 2, histogram.height)
                            histogramContext.lineTo(i * 2, grayList[i] / 20)
                            histogramContext.stroke()
                        }
                    }
                    
                    // 分量法 - 绿色
                    document.getElementById("green-weight-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < grayList.length; i++) {
                            grayList[i] = 0
                        }
                        
                        let gray = 0;
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            gray = originalImageData.data[i + 1] // Green Weight
                            imageData.data[i + 0] = gray // Red
                            imageData.data[i + 1] = gray // Green
                            imageData.data[i + 2] = gray // Blue
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                            
                            grayList[gray] += 1
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                        
                        grayImageData = ctx.getImageData(0, 0, image.width, image.height)
                        
                        
                        // 绘制直方图
                        const sum = grayList.reduce((accumulator, currentValue, index, array) => {
                            return accumulator + currentValue
                        })
                        console.log(grayList)
                        console.log("sum = " + sum, "max = " + Math.max(...grayList), "remainder = " + Math.max(...grayList) % 100)
                        histogram.width = 256 * 2
                        histogram.height = (Math.max(...grayList) + 100 - Math.max(...grayList) % 100) / 20
                        histogramContext.strokeStyle = '#000000'
                        histogramContext.lineWidth = 1
                        for (let i = 0; i < grayList.length; i++) {
                            histogramContext.beginPath()
                            histogramContext.moveTo(i * 2, histogram.height)
                            histogramContext.lineTo(i * 2, grayList[i] / 20)
                            histogramContext.stroke()
                        }
                    }
                    
                    // 分量法 - 蓝色
                    document.getElementById("blue-weight-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < grayList.length; i++) {
                            grayList[i] = 0
                        }
                        
                        let gray = 0;
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            gray = originalImageData.data[i + 2] // Blue Weight
                            imageData.data[i + 0] = gray // Red
                            imageData.data[i + 1] = gray // Green
                            imageData.data[i + 2] = gray // Blue
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                            
                            grayList[gray] += 1
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                        
                        grayImageData = ctx.getImageData(0, 0, image.width, image.height)
                        
                        // 绘制直方图
                        const sum = grayList.reduce((accumulator, currentValue, index, array) => {
                            return accumulator + currentValue
                        })
                        console.log(grayList)
                        console.log("sum = " + sum, "max = " + Math.max(...grayList), "remainder = " + Math.max(...grayList) % 100)
                        histogram.width = 256 * 2
                        histogram.height = (Math.max(...grayList) + 100 - Math.max(...grayList) % 100) / 20
                        histogramContext.strokeStyle = '#000000'
                        histogramContext.lineWidth = 1
                        for (let i = 0; i < grayList.length; i++) {
                            histogramContext.beginPath()
                            histogramContext.moveTo(i * 2, histogram.height)
                            histogramContext.lineTo(i * 2, grayList[i] / 20)
                            histogramContext.stroke()
                        }
                    }
                    
                    // 平均值法
                    document.getElementById("mean-value-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < grayList.length; i++) {
                            grayList[i] = 0
                        }
                        
                        let gray = 0;
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            gray = Math.round((originalImageData.data[i + 0] + originalImageData.data[i + 1] + originalImageData.data[i + 2]) / 3)
                            imageData.data[i + 0] = gray // Red
                            imageData.data[i + 1] = gray // Green
                            imageData.data[i + 2] = gray // Blue
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                            
                            grayList[gray] += 1 // 统计灰度值数量
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                        
                        grayImageData = ctx.getImageData(0, 0, image.width, image.height)
                        
                        
                        // 绘制直方图
                        const sum = grayList.reduce((accumulator, currentValue, index, array) => {
                            return accumulator + currentValue
                        })
                        console.log(grayList)
                        console.log("sum = " + sum, "max = " + Math.max(...grayList), "remainder = " + Math.max(...grayList) % 100)
                        histogram.width = 256 * 2
                        histogram.height = (Math.max(...grayList) + 100 - Math.max(...grayList) % 100) / 20
                        histogramContext.strokeStyle = '#000000'
                        histogramContext.lineWidth = 1
                        for (let i = 0; i < grayList.length; i++) {
                            histogramContext.beginPath()
                            histogramContext.moveTo(i * 2, histogram.height)
                            histogramContext.lineTo(i * 2, grayList[i] / 20)
                            histogramContext.stroke()
                        }
                    }
                    
                    // 最大值法
                    document.getElementById("max-value-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < grayList.length; i++) {
                            grayList[i] = 0
                        }
                        
                        let gray = 0;
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            gray = Math.max(originalImageData.data[i + 0], originalImageData.data[i + 1], originalImageData.data[i + 2])
                            imageData.data[i + 0] = gray // Red
                            imageData.data[i + 1] = gray // Green
                            imageData.data[i + 2] = gray // Blue
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                            
                            grayList[gray] += 1 // 统计灰度值数量
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                        
                        grayImageData = ctx.getImageData(0, 0, image.width, image.height)
                        
                        
                        // 绘制直方图
                        const sum = grayList.reduce((accumulator, currentValue, index, array) => {
                            return accumulator + currentValue
                        })
                        console.log(grayList)
                        console.log("sum = " + sum, "max = " + Math.max(...grayList), "remainder = " + Math.max(...grayList) % 100)
                        histogram.width = 256 * 2
                        histogram.height = (Math.max(...grayList) + 100 - Math.max(...grayList) % 100) / 20
                        histogramContext.strokeStyle = '#000000'
                        histogramContext.lineWidth = 1
                        for (let i = 0; i < grayList.length; i++) {
                            histogramContext.beginPath()
                            histogramContext.moveTo(i * 2, histogram.height)
                            histogramContext.lineTo(i * 2, grayList[i] / 20)
                            histogramContext.stroke()
                        }
                    }
                    
                    // 加权平均法
                    document.getElementById("weighted-average-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < grayList.length; i++) {
                            grayList[i] = 0
                        }
                        
                        let gray = 0;
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            gray = Math.round(0.299 * originalImageData.data[i + 0] + 0.587 * originalImageData.data[i + 1] + 0.114 * originalImageData.data[i + 2])
                            imageData.data[i + 0] = gray // Red
                            imageData.data[i + 1] = gray // Green
                            imageData.data[i + 2] = gray // Blue
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                            
                            grayList[gray] += 1 // 统计灰度值数量
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                        
                        grayImageData = ctx.getImageData(0, 0, image.width, image.height)
                        
                        
                        // 绘制直方图
                        const sum = grayList.reduce((accumulator, currentValue, index, array) => {
                            return accumulator + currentValue
                        })
                        console.log(grayList)
                        console.log("sum = " + sum, "max = " + Math.max(...grayList), "remainder = " + Math.max(...grayList) % 100)
                        histogram.width = 256 * 2
                        histogram.height = (Math.max(...grayList) + 100 - Math.max(...grayList) % 100) / 20
                        histogramContext.strokeStyle = '#000000'
                        histogramContext.lineWidth = 1
                        for (let i = 0; i < grayList.length; i++) {
                            histogramContext.beginPath()
                            histogramContext.moveTo(i * 2, histogram.height)
                            histogramContext.lineTo(i * 2, grayList[i] / 20)
                            histogramContext.stroke()
                        }
                    }
                }
                
                image.src = "img/transformers.jpg"
                
                // https://zhuanlan.zhihu.com/p/66301560
            }
        </script>
    </body>
</html>

参考

直方图，看这一篇就够了！

百度百科 - 质量分布图

百度百科 - 直方图（统计报告图）

好好活着，不要熬夜
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
使用canvas绘制直方图报表
weixin_34237596的博客
04-24 598
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 实现canvas绘制地图，引用图片，对画布进行原点 滚轮缩放，按键缩放，拖动等功能 把pagex转化为offsetx
weixin_52633842的博客
05-06 4149
vue 实现canvas绘制地图，引用图片，对画布进行原点 滚轮缩放，按键缩放，拖动等功能
vue2 使用 html2Canvas 和 canvg 生成图片案例
不怕麻烦的鹿丸的博客
07-13 3643
html2canvas 将页面保存在canvas进行图片保存 canvg 将页面中的svg转化为canvas1.1 启动canvg引擎有三种方式，分别是from和fromString的区别是from需要传入的是svg本身，而fromString需要传入的是svg的字符串形式。这三种方式都可以传入三个参数，第一个参数是canvas画布的绘制上下文，第二个是需要绘制的svg，第三个是自定义配置选项，可以用于控制画布的渲染结果。1.2 canvg启动渲染的方法有两种：、。区别是当需要绘制的svg是动态图时，只会绘
vue使用canvas画布记录
weixin_45122482的博客
08-22 1532
canvas画布记录
数据可视化 -- canvas基本使用
weixin_50983325的博客
10-21 1070
canvas绘制线条 const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') ctx.beginPath() ctx.lineWidth = 4 ctx.strokeStyle = 'orange' // 起点 终点 中间点 ctx.moveTo(100, 100) ctx.lineTo(300, 300) ctx.lineTo(500, 200) ctx.stroke() ctx.clo
photos-comparison-js:用于比较两张图片的Javascript代码
06-21
或使用更高级的图像处理算法，如归一化互相关(NCC)、结构相似性(SSIM)或直方图比较。具体使用哪种方法取决于需求的复杂性和性能要求。 4. 结果展示：比较结果可以以各种方式呈现，比如高亮显示差异区域，或者通过...
VML统计图之直方图
10-19
在这个文件中，开发者可能使用了JavaScript和VML标签来创建直方图，包括定义各个条形的位置、高度和颜色，以及可能的轴标签和图例。 通过这个案例，我们可以学习如何利用过时但仍然有用的VML技术来创建交互式和视觉...
Low-Poly:基于2种颜色生成的Low poly风格的canvas画布
05-23
可以使用色彩分析算法，例如色彩直方图，找到图像中的主导色调。然后，为每个多边形随机分配这两种颜色之一，或者根据像素位置进行渐变过渡。 4. **绘制多边形**：在Canvas上，我们可以使用`context.beginPath()`...
echarts-5.3.0-all.zip
02-23
1. **多样化图表**：ECharts 提供了多种图表类型，适用于不同场景的数据展示，如直方图、折线图、饼图、散点图等，这些图表可以进行组合，实现更复杂的可视化需求。 2. **交互性**：ECharts 图表支持鼠标悬停、点击...
learn-imgproc
04-01
在学习JavaScript图像处理时，还需要理解一些基本的图像处理概念，比如直方图均衡化（用于提升图像对比度）、卷积（用于模糊、锐化等效果）以及色彩空间转换（如从RGB到HSV，以便更容易地调整色彩）。此外，了解如何...
Vue+Canvas绘图使用
热门推荐
qq_42112846的博客
03-10 2万+
1、前言 图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。 由于浏览器的机制，使用window.location.href下载图片时，并不会保存到本地，会在浏览器打开。 2、 实现原理 2.1、 绘制画布 <el-dialog title="查看图片" :visible.sync="dialogJPG" append-...
Vue获取图片的三合一直方图
一天不学习，就浑身难受
06-17 961
vue获取图片的RGB直方图
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
web前端开发
03-08 7137
来源 |https://segmentfault.com/a/11900000189938331、前言1.1 、业务场景图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并...
vue使用Canvas
m0_63466615的博客
07-14 1万+
2.样式区（style区） canvas实际上是一个内联元素，要设置它在页面水平居中，需要把它设置为块级元素，（再次声明，不可以在css里设置canvas的宽高） 3.脚本区(script区) （1）获得canvas 两个的区别就是，用ref找到的canvas使用时需要使用canvas.value, 而document.querySelector找到的canvas使用时不需要加.value （3）画线（两
canvas 绘制多个方框【基于vue】
rice__pudding的博客
09-13 1394
1.dom <canvas width="640" height="480" id="paint_canvas" ref="paint_canvas" @mousedown.left="leftMouseClick($event)" @mousemove="mouseMovePaint($event)" @mouseup="mouseUpPaint($event)" ></canvas> 2.methods /** * 监听鼠标按键 获
canvas+echarts.js实现彩色图像的RGB直方图显示
HYY的博客
03-23 3143
由于JS不能直接读取图像像素，故借助HTML5的canvas标签读取图像文件，通过getImageData() 方法可以实现读取图像的像素（8位无符号整型数组）。 获取图像像素的数据（包含RGBA）后，只需遍历数组即可统计其中的RGB三通道的每一位（0 - 255）的个数。 最后利用统计的RGB数据，根据区间段渲染直方图。
JavaScript实现灰度直方图(附完整源码)
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 52
JavaScript实现灰度直方图(附完整源码)
数据可视化
feifeifei812的博客
05-27 871
文章目录 前言 随着时代的不断更替，信息爆炸的今天，海量的数据如果仅仅利用表格的形式进行汇总，无法清晰明了地观察数据之间的联系，可视化应运而生。 数据可视化利用不同的可视化图形手段，清晰且有效的传达信息，丰富的数据图片冲击人们的视觉，是一项非常重要的技术，因此想利用这篇博客记录自己，作为小白对于这门技术的入门学习过程。期待大家的点评和指教。 一、数据可视化是什么？ 　　数据可视化技术是关于数据视觉表现形式的科学技术研究，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的...
数据可视化基础——js篇
m0_52173594的博客
05-19 3011
数据可视化 一、Javascript可视化基础 1.Javascript直方图 <html> <body> <svg id="mysvg" width=800 height=600> </svg> <script> var w = window.innerWidth || document.documentElement.clientWidth || d
uni-app canvas绘制雷达图
09-11
Uni-app是一种支持跨平台开发的框架，可以同时在Web、iOS、Android以及各种小程序平台上运行。而Canvas是HTML5提供的功能强大的绘图API。因此，在uni-app中使用Canvas绘制雷达图是可行的。 常用的绘图库uCharts是一款基于Canvas API开发的适用于各个前端应用的图表库，包括uni-app。开发者可以使用uCharts编写一套代码，然后在uni-app中将其运行到各个平台上，包括小程序平台。 具体实现绘制雷达图的步骤如下： 1. 首先，你需要在uni-app项目中引入uCharts库。可以通过npm安装或者直接下载导入。 2. 在页面中创建一个Canvas元素，用于绘制雷达图。可以通过设置Canvas的宽高来控制雷达图的大小。 3. 接下来，在页面的脚本中，引入uCharts库，并创建一个绘图实例。 4. 使用绘图实例的API去配置和绘制雷达图。你可以设置雷达图的数据、样式、标签等。 5. 最后，将绘制好的雷达图渲染到Canvas中，以便在页面中显示出来。 需要注意的是，具体的代码实现可能会根据使用的uCharts版本和uni-app的不同而有所不同。因此，在具体的实践过程中，你可以根据具体的需求和文档进行相应的调整。 总之，通过使用uCharts库和Canvas API，你可以在uni-app中实现绘制雷达图的功能。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值