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 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
jQuery实现元素的插入
Feb 27 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
Vue实现手机计算器
Aug 17 Javascript
原生JS实现多条件筛选
Aug 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
php 启动报错如何解决
2014/01/17 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
客户代表自我评价范例
2013/09/24 职场文书
《我的信念》教学反思
2014/02/15 职场文书
合作协议书怎么写
2014/04/18 职场文书
创业培训计划书
2014/05/03 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
python区块链实现简版工作量证明
2022/05/25 Python