JavaScript如何对图片进行黑白化


Posted in Javascript onApril 10, 2018

HTML5推出了<canvas>元素,使我们可以通过js动态的在 <canvas> 这个区域之中进行图像的绘制。而我们这次对图像的黑白化就是使用js操作<canvas>元素 来实现的。

先看一下效果图

JavaScript如何对图片进行黑白化

左侧为 img标签 , 右侧为 canvas 元素标签,结构如下

<img src="1.jpg" style="width: 200px; height: 199px"/>
<canvas id="drawing" width="200" height="199" ></canvas>

JS的代码很简单, 只有20多行 ,不过本着授人与鱼不如授人于渔的态度,源码会贴到最下面,我们先说理论。

1、关于图片

 大家应该都知道,所谓图片是由一个个的像素点组成的,也就是说一个 300*300大小的图片,共有300*300的像素点,而每一个像素点都是由三原色(red,green,blue)加透明度(alpha)来组成。所以说如果我们希望改变图像的图像数据,其实就是改变图像每一个像素点的数据。

2、关于API

我们通过 var drawing = document.getElementById('drawing'); 这个方法可以拿到 canvas对象,canvas对象提供了 2D、3D两种绘图方式,这里我们使用2D绘图
 使用 context2d = drawing.getContext('2d'); 方法获得context2d对象。拿到context2d对象之后,我们通过context2d提供的方法getImageData(),来获取图像数据,getImageData()有4个参数,分别表示画面区域的 x 和 y 坐标以及该区域的像素宽度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height); 

 ImageData 对象都有三个属性:width、height 和
data。其中 data 属性是一个数组,保存着图像中每一个像素的数据。并通过,red,green,blue,alpha来表示。那么我们如果想要改变图像的图像数据,就需要改变 imagedata的data属性数据,改变 red,green,blue,alpha 的值。

这里是源代码

function drawImageData () {
      var context2d = null;
      if(drawing.getContext) {
        context2d = drawing.getContext('2d');
      }
      if (context2d == null) {
        return;
      }
      var image = document.images[0];
      context2d.drawImage(image, 0 , 0);
      var imagedata = context2d.getImageData(0, 0, image.width, image.height);
      var data = imagedata.data;
      console.log('data: ' + data);
      var i,len,red,green,blue,alpha,average;
      for (i = 0 , len = data.length; i < len; i+=4) {
        red = data[i];
        green = data[i + 1];
        blue = data[i + 2];
        alpha = data[i + 3];
        average = Math.floor((red + green + blue) / 3);
        data[i] = average; 
        data[i+1] = average; 
        data[i+2] = average;
      }
      imagedata.data = data;
      context2d.putImageData(imagedata, 0, 0);
    }

总结

以上所述是小编给大家介绍JavaScript如何对图片进行黑白化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
uploadify 3.0 详细使用说明
Jun 18 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
axios 处理 302 状态码的解决方法
Apr 10 #Javascript
vue.js中npm安装教程图解
Apr 10 #Javascript
vue实现验证码按钮倒计时功能
Apr 10 #Javascript
vue 微信授权登录解决方案
Apr 10 #Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 #Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 #Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP callback函数使用方法和注意事项
2015/01/23 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
Python基于property实现类的特性操作示例
2018/06/15 Python
python类的实例化问题解决
2019/08/31 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
物流专员岗位职责
2014/02/17 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
授权收款委托书范本
2014/10/10 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL