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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
Nuxt.js实战详解
Jan 18 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
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
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python类的专用方法实例分析
2015/01/09 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python编写猜数字小游戏
2019/10/06 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python的数学算法函数及公式用法
2020/11/18 Python
自主招生自荐信范文
2013/12/04 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
店长职务说明书
2014/02/04 职场文书
婚纱店策划方案
2014/05/22 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2015年师德师风承诺书
2015/01/22 职场文书