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 相关文章推荐
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
小程序实现多选框功能
Oct 30 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php常用数组函数实例小结
2016/12/29 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python队列Queue的详解
2019/05/10 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
新浪网技术部笔试题
2016/08/26 面试题
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
致跳高运动员广播稿
2014/01/13 职场文书
就业协议书范本
2014/04/11 职场文书
金融事务专业求职信
2014/04/25 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
民用住房租房协议书
2014/10/29 职场文书
会议开幕词
2015/01/28 职场文书
大学升旗仪式主持词
2015/07/04 职场文书