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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 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
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
在javascript中实现函数数组的方法
2013/12/25 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python字符串连接方式汇总
2014/08/21 Python
Python字符串中查找子串小技巧
2015/04/10 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
python模块导入的细节详解
2018/12/10 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
后勤人员自我评价怎么写
2013/09/19 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
酒店员工检讨书
2014/02/18 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
2014年三万活动总结
2014/04/26 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS