图像灰度化

最新推荐文章于 2023-07-11 22:53:01 发布
最新推荐文章于 2023-07-11 22:53:01 发布
阅读量147 收藏
点赞数
分类专栏： HTML & CSS & JavaScript 文章标签： html5 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29761395/article/details/117787427
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
        <style type="text/css">
            * {
                /* margin: 0;
                padding: 0; */
                box-sizing: border-box;
            }
            canvas {
                /* border-width: 1px;
                border-color: #000000;
                border-style: solid; */
            }
            input, label {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <div>
            <input type="radio" id="original" name="color" checked />
            <label for="original">Original</label>
            <input type="radio" id="red" name="color" />
            <label for="red">Red</label>
            <input type="radio" id="green" name="color" />
            <label for="green">Green</label>
            <input type="radio" id="blue" name="color" />
            <label for="blue">Blue</label>
            
            <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>
            
            <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>
        </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 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)

                    document.getElementById("original").onchange = (event) => {
                        ctx.putImageData(originalImageData, 0, 0)
                    }

                    document.getElementById("red").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            imageData.data[i] = originalImageData.data[i] // Red
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    document.getElementById("green").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            imageData.data[i + 1] = originalImageData.data[i + 1] // Green
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    document.getElementById("blue").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            imageData.data[i + 2] = originalImageData.data[i + 2] // Blue
                            imageData.data[i + 3] = originalImageData.data[i + 3] // Alpha
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    // 分量法 - 红色
                    document.getElementById("red-weight-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        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
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    // 分量法 - 绿色
                    document.getElementById("green-weight-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        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
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    // 分量法 - 蓝色
                    document.getElementById("blue-weight-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        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
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    // 平均值法
                    document.getElementById("mean-value-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        let gray = 0;
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            gray = (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
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    // 最大值法
                    document.getElementById("max-value-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        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
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                    
                    // 加权平均法
                    document.getElementById("weighted-average-method").onchange = (event) => {
                        const imageData = ctx.createImageData(originalImageData)
                        
                        let gray = 0;
                        for (let i = 0; i < originalImageData.data.length; i += 4) {
                            gray = 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
                        }
                        
                        ctx.putImageData(imageData, 0, 0)
                    }
                }
                
                image.src = "img/transformers.jpg"
            }
        </script>
    </body>
</html>

参考

图像处理：图像灰度化
灰度处理与二值化的关系
【图像处理】——图像的灰度化处理（Python实现三种方法——最大值法、平均值法、加权均值法、gamma校正）

好好活着，不要熬夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
【JavaScript】实现简单的图片处理
等时钟成长
08-08 3540
目录 图片在前端的存储形式 前端上传图片 图片处理 灰度操作 负片效果 压缩 膨胀 马赛克 字符画 参考资料 图片在前端的存储形式 图片以Uint8ClampedArray的格式存储. 这是一个一维数组,每四位组成一个像素点,分别代表rgba四个参数,每个参数的取值范围都是0~2^8-1(0~255). // 这是一个全黑色,透明的像素点 const pixel = new Uint8ClampedArrray([0,0,0,255]); 一张图片就是由宽 x 高个这..
图像灰度处理
baigu7595的博客
09-03 483
这里采用四种方法对图像进行灰度处理： 方法一：读取图片时只读取灰度图像 方法二：调用opencv Api实现 方法三：算法实现图像灰度：gray = （B + G + R）/3 方法四：算法实现：gray = r*0.299 + g*0.587 + b*0.114 代码： import cv2import numpy as npgray1 = cv2.imread('D:/p...
图像灰度化处理
热门推荐
crossoverpptx的博客
10-11 2万+
在RGB模型中，如果R=G=B时，则彩色表示一种灰度颜色，其中R=G=B的值叫灰度值，因此，灰度图像每个像素只需一个字节存放灰度值（又称强度值、亮度值），灰度范围为0-255，当灰度为255的时候，表示最亮（纯白）；当灰度为0的时候，表示最暗（纯黑）。灰度化的好处是：相较于彩色图像灰度图像占内存更小，运行速度更快；灰度图像后可以在视觉上增加对比，突出目标区域。
图像处理之图像灰度化
weixin_42491648的博客
07-11 3272
图像灰度化： 将彩色图像转化成为灰度图像的过程成为图像的灰度化处理
图像的灰度直方图
李丽的博客
03-01 2199
图像直方图：         从数学上来说，图像直方图描述的是图像的各个灰度级的统计特征，它是图像灰度值的函数，统计一副图像各个等级的像素出现的次数或概率。有一种特殊的直方图叫做归一化直方图，可以直接反映不同灰度级出现的比率。         从图形上来说，灰度直方图是一个二维直方图，横坐标为图像中各个像素点的灰度级别，纵坐标表示具有各个灰度级别的像素在图像中出现的概率。 /*---
图像灰度化_LabVIEW图像灰度化小程序_labview图像_
10-03
在LabVIEW（Laboratory Virtual Instrument Engineering Workbench）这种强大的图形化编程环境中，我们可以创建小程序来实现图像灰度化。本文将详细讲解LabVIEW中的图像灰度化，包括均值法、最大值法和加权法这三种...
RTCP图像灰度化算法
04-03
然而，这里的"RTCP图像灰度化算法"似乎是指在处理视频流时，将彩色图像转换为灰度图像的一种特定方法。灰度化是图像处理中的基本操作，常用于减少数据量、简化图像分析或作为其他复杂图像处理任务的预处理步骤。 在...
DIBDisplay.rar_图像灰度化
07-14
在图像处理领域，"图像灰度化"是一个基础且重要的步骤，尤其在预处理阶段扮演着关键角色。本文将深入探讨图像灰度化的概念、原理及其在真彩色图像预处理中的应用。 首先，理解什么是“图像灰度化”。在彩色图像中，...
111.zip_图像灰度化
07-14
在图像处理领域，"图像灰度化"是一个基础且重要的步骤，它涉及到将彩色图像转换为灰度图像。灰度图像是一种单通道图像，每个像素只有一种灰度值，没有色彩信息，通常由黑到白的256级灰度表示。在"111.zip_图像灰度化...
使用 Editor.md 图片上传出现的问题及解决思路
qq_29761395的博客
02-06 7292
文章目录Spring Boot - 使用 Editor.md 图片上传出现的问题问题及解决思路参考 Spring Boot - 使用 Editor.md 图片上传出现的问题 Spring Boot 2.2.4.RELEASE 问题及解决思路 须知：项目是前后端分离，涉及跨域。 测试使用的是 Editor.md 提供的示例“image-upload.html”，该文件位于 examples 文件夹。...
JavaScript - 读取 CSV（Comma-Separated Values）文件
qq_29761395的博客
01-05 6088
文章目录示例效果代码参考 示例 效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>读取 CSV（Comma-Separated Values）文件</title> </head> <body> <!-- https://www.iana.org/as
JavaScript - canvas - 使用鼠标画线，带撤销与重做功能
qq_29761395的博客
01-27 5036
文章目录预备知识画直线项目结构HTMLCSSJavaScript效果使用鼠标画线，带撤销与重做功能使用鼠标画线HTMLJavaScript效果添加撤销与重做功能HTMLJavaScript效果 预备知识 画直线 项目结构 HTML index.html 文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>画直线</titl
HTML & CSS & JavaScript - “隐藏” input type=file 按钮后面的文字
qq_29761395的博客
08-14 4926
文章目录参考 <input type="file" /> 默认的样式： 实际上，你无法单独隐藏 <input type="file" /> 元素所展现的按钮后面的文字。但是，可以通过隐藏整个元素，然后使用其他元素（简称 B）代替它出现，就可以“间接地”隐藏 <input type="file" /> 元素所展现的按钮后面的文字。当点击 B 时，调用已经隐藏的 <input type="file" /> 元素的 click() 方法，同样可以实现类似用户点击
JavaScript - canvas - 画直角坐标系
qq_29761395的博客
01-26 4068
文章目录预备知识关于 canvas 画布的原点画直线项目结构HTMLCSSJavaScript效果设置 canvas 起点偏移（**平移变换**）JavaScript效果画空心三角形JavaScript效果画实心三角形JavaScript效果画直角坐标系JavaScript效果参考 预备知识 关于 canvas 画布的原点 在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。canvas 的栅格的起点为左上角（坐标为 (0, 0)）。 画直线 项目结构 HTML index
echarts.js - 动态数据 + 时间坐标轴
qq_29761395的博客
09-30 3771
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> &.
HTML & CSS & JavaScript - 一个简单数字时钟
qq_29761395的博客
07-15 2942
代码】HTML&CSS&JavaScript-一个简单数字时钟。
JavaScript - canvas - 通过 ＜input type=“file“ /＞ 加载图片
qq_29761395的博客
08-14 2861
文章目录参考 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using image</title> <style type="text/css"> * { /* margin: 0; padding: 0;
CSS - 图片渐显渐隐
qq_29761395的博客
11-05 2676
文章目录示例参考 示例 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rR6qIbLA-1636082211260)(效果.gif)] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片渐显渐隐</title> <style type="text/css">
python opencv图像灰度化
最新发布
04-16
图像灰度化是将彩色图像转换为灰度图像的过程，即将图像的每个像素点的RGB值转换为一个灰度值。 在Python OpenCV中，可以使用cv2.cvtColor()函数将彩色图像转换为灰度图像。以下是一个简单的示例代码： ```python ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值