JavaScript实现256色转灰度图
一幅完整的图像，是由红色、绿色、蓝色三个通道组成的。红色、绿色、蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示" 红，绿，蓝"在图像中的比重。通道中的纯白，代表了该色光在此处为最高亮度，亮度级别是255。
灰度化方法：
1.浮点算法：Gray = R*0.299 + G*0.587 + B*0.114
2.整数方法：Gray = (R*299 + G*587 + B*114 + 500) / 1000
3.移位方法：Gray =(R*28+G*151+B*77)>>8;
4.平均值法：Gray=（R+G+B）/3;
5.仅取绿色：Gray=G；
只要将原来的RGB(R,G,B)中的R,G,B统一用Gray替换，形成新的RGB(Gray,Gray,Gray)就完成灰度化了；
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ImgBase</title>
<style type="text/css">
.scream{
width:400px;
height:300px;
position: absolute;
top:60px;
border: 1px solid;
}
#canvas{
position: absolute;
top:60px;
left:500px;
border: 1px dashed;
}
</style>
</head>
<body>
<input type="file" onchange="loadImg()"/>
<input type="button" value="灰度化" onclick="Convert256toGray()"/>
<br/><br/>
<div class="scream">
<img id="scream" width="400px" height="300px" alt="Image preview...">
</div>
<canvas id="canvas" width="400px;" height="300px;">
your browser does not support canvas!
</canvas>
<script>
function Convert256toGray(){
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var imgData = ctx.getImageData(0,0,c_w,c_h);
for (var i=0;i<imgData.data.length;i+=4)
{
var R = imgData.data[i]; //R(0-255)
var G = imgData.data[i+1]; //G(0-255)
var B = imgData.data[i+2]; //G(0-255)
var Alpha = imgData.data[i+3]; //Alpha(0-255)
//浮点算法
var gray = R*0.299 + G*0.587 + B*0.114;
//整数算法
// var gray = (R*299 + G*587 + B*114 + 500) / 1000;
//移位算法
// var gray =(R*76+G*151+B*28)>>8;
//平均值算法
// var gray = (R+G+B)/3;
//仅取绿色
// var gray=G;
imgData.data[i] = gray;
imgData.data[i+1] = gray;
imgData.data[i+2] = gray;
imgData.data[i+3] = Alpha;
}
ctx.putImageData(imgData,0,0);
}
</script>
<!--base-->
<script>
//canvas图像的宽高
var c_w = 400; var c_h = 300;
//加载img图像
function loadImg(){
var img = document.getElementById("scream");
var file = document.querySelector('input[type=file]').files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必须为图片！");
return false;
}
var reader = new FileReader();
reader.addEventListener("load", function () {
img.src = reader.result;
}, false);
if(file) {
reader.readAsDataURL(file);
loadCanvas();
}
}
//加载canvas图像
function loadCanvas(){
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,0,0,c_w,c_h);
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
Android提高之使用NDK把彩图转换灰度图的方法
一般而言在Android上使用JAVA实现彩图转换为灰度图,与J2ME上的实现方法类似,不过遇到频繁地转换或者是大图转换时,就必须使用NDK来提高速度了.本文主要通过JAVA和NDK这两种方式来分别实现彩图转换为灰度图,并给出速度的对比,供大家参考. 先来简单地介绍一下Android的NDK使用步骤: 以NDK r4为例,或许以后新版的NDK的使用方法略有不同. 1.下载支持C++的android-ndk-r4-crystax,支持C++的话可玩性更强. 2.下载cygwin,选择ftp://m
-
Android-如何将RGB彩色图转换为灰度图方法介绍
实例:RGB2Grey 项目运行效果图: 源代码: [java] public class MainActivity extends Activity { /* (non-Javadoc) * @see android.app.Activity#onCreate(android.os.Bundle) */ @Override public void onCreate(Bundle savedInstanceState) { sup
-
JavaScript实现256色转灰度图
一幅完整的图像,是由红色.绿色.蓝色三个通道组成的.红色.绿色.蓝色三个通道的缩览图都是以灰度显示的.用不同的灰度色阶来表示" 红,绿,蓝"在图像中的比重.通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255. 灰度化方法: 1.浮点算法:Gray = R*0.299 + G*0.587 + B*0.114 2.整数方法:Gray = (R*299 + G*587 + B*114 + 500) / 1000 3.移位方法:Gray
-
基于OpenCV自定义色条实现灰度图上色功能代码
场景需求 Qt在进行2D图像显示时,有很方便的色条接口,可以让灰度图基于其设计的色条进行上色,比如设置1为红色,0.55为黄色,0.45为绿色,0为蓝色,那么灰度图就会在归一化后按照从蓝到红(从小到大)进行渐变色上色.但是有时候这个接口需要搭配的代码太多,给开发带来一定麻烦,因此我基于其原理写了一个可以替代该功能的函数GrayToColor_ColorBar. 函数原理:首先需要将灰度值图转化为0-255的8通道(uchar)灰度图,运用归一化函数可以实现:之后考虑到
-
C#实现简易灰度图和酷炫HeatMap热力图winform(附DEMO)
目录 一.效果展示 二.随机生成热力点 三.灰度图生成解析 四.热力图生成解析 五.源码下载 一.效果展示 二.随机生成热力点 热力点类 class HeatPoint { public int X; public int Y; public byte Intensity; public HeatPoint(int iX, int iY, byte bIntensity) { X = iX; Y = iY; Intensity = bIntensity; } } 随机生成热力点 privatev
-
C++基于灰度图上色GrayToColorFromOther的实现
目录 场景需求 功能函数代码 C++测试代码 场景需求 之前有提到给灰度图上色的需求,在此基础上,还有一种需求,就是基于另一张参考灰度图的色板来给当前的灰度图上色,比如参考灰度图的数值区间为-10到10,颜色从蓝到绿再到红,而当前的灰度图的数据区间为-1到1,若基于参考灰度图的色板确定数据对应的颜色,则当前灰度图的颜色应该在绿色左右波动. 下方为具体实现函数和测试代码. 功能函数代码 /** * @brief GrayToColorFromOther 灰度图上色,基于参考灰度图的色板 * @pa
-
C语言实现BMP图像处理(彩色图转灰度图)
我们知道真彩图不带调色板,每个象素用 3 个字节,表示 R.G.B 三个分量.所以处理很简单,根据 R.G.B 的值求出 Y 值后,将 R.G.B 值都赋值成 Y,写入新图即可. 在YUV 的颜色表示方法中,Y 分量的物理含义就是亮度,它含了灰度图(grayscale)的所有信息,只用 Y 分量就完全能够表示出一幅灰度图来.YUV 和RGB 之间有着如下的对应关系: 再来看看带调色板的彩色图,我们知道位图中的数据只是对应调色板中的一个索引值,我们只需要将调色板中的彩色变成灰度,形成新调色板,而位
-
C# .Net实现灰度图和HeatMap热力图winform(进阶)
目录 一.前文 二.渐进颜色调色板 三.热力点大小和扩展大小 一.前文 前文可以参考我的前一篇博文:C# .Net实现简易灰度图和酷炫HeatMap热力图winform 但是,先前的热力图效果,我并不满意.不满意的地方主要有三点: 热力图的颜色是通过一个调色板图片来实现,如果想要其他颜色,改起来比较麻烦 热力图的扩散效果不好看,不够渐进 热力图的每个点大小都一致,应该是大小不一才对 因此,我做了改进,上一个图是之前的效果,下一个图是改进后的效果 二.渐进颜色调色板 //创建调色板,颜色映射 pr
-
python图像处理-利用一行代码实现灰度图抠图
目录 一行代码实现灰度图抠图 Python抠图程序源码 准备 程序构思 完整代码截图如下,每条语句均有功能注释 一行代码实现灰度图抠图 抠图是ps的最基本技能,利用python可以实现用一行代码实现灰度图抠图. 基础算法是确定图像二值化分割阈值的大津法,将图像分成背景和前景两部分,最大化背景和前景之间的类间方差. 具体理论部分可以搜索大津法了解一下,代码部分只要在调用threshold的函数中,参数选择THRESH_OTSU就可以调用大津法分割 ret1, th1 = cv2.threshold
-
JavaScript直播评论发弹幕切图功能点集合效果代码
一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl