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继承的实现
Oct 24 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
js获取和设置属性的方法
Feb 20 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
jQuery treeview树形结构应用
Mar 24 jQuery
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/03 咖啡文化
php pdo连接数据库操作示例
2019/11/18 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
python二分法实现实例
2013/11/21 Python
全面解读Python Web开发框架Django
2014/06/30 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
python实现滑雪游戏
2020/02/22 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
华为慧通面试题
2012/09/11 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
新员工欢迎词
2014/01/12 职场文书
德语专业求职信
2014/03/12 职场文书
英文自荐信常用句子
2014/03/26 职场文书
年会搞笑主持词
2014/03/27 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
公司租房协议书范本
2014/10/08 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
党员年终个人总结
2015/02/14 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
基于Python编写一个监控CPU的应用系统
2022/06/25 Python
tree shaking对打包体积优化及作用
2022/07/07 Java/Android