JavaScript实现256色转灰度图


Posted in Javascript onFebruary 22, 2017

一幅完整的图像,是由红色、绿色、蓝色三个通道组成的。红色、绿色、蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示" 红,绿,蓝"在图像中的比重。通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是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)就完成灰度化了;

效果图:

JavaScript实现256色转灰度图

代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 #Javascript
微信小程序 扎金花简单实例
Feb 21 #Javascript
angular中的http拦截器Interceptors的实现
Feb 21 #Javascript
微信小程序 PHP生成带参数二维码
Feb 21 #Javascript
vue-resource 拦截器使用详解
Feb 21 #Javascript
微信小程序 template模板详解及实例
Feb 21 #Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 #Javascript
You might like
第三节--定义一个类
2006/11/16 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
简单实现php上传文件功能
2017/09/21 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
Jquery性能优化详解
2014/05/15 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
使用Python写一个量化股票提醒系统
2018/08/22 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
员工教育培训协议书
2014/09/27 职场文书
团队会宣传标语
2014/10/09 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
离婚协议书范文2016
2016/03/18 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
mysql 获取相邻数据项
2022/05/11 MySQL