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 相关文章推荐
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
Django使用多数据库的方法
Sep 06 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 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
西德产收音机
2021/03/01 无线电
php生成静态文件的多种方法分享
2012/07/17 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python适合做数据挖掘吗
2020/06/16 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
餐饮加盟计划书
2014/01/10 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
关于环保的建议书
2014/05/12 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
新学期开学演讲稿
2014/05/24 职场文书
美食节目策划方案
2014/05/31 职场文书
市场推广策划方案
2014/06/02 职场文书
高中同学会活动方案
2014/08/14 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
论文评审意见
2015/06/05 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python