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 在线压缩和格式化收藏
Jan 16 Javascript
由document.body和document.documentElement想到的
Apr 13 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
js实现微博发布小功能
Jan 12 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 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数组是否为索引数组的实现方法
2013/06/13 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
python实现感知器
2017/12/19 Python
python的debug实用工具 pdb详解
2019/07/12 Python
vue常用指令代码实例总结
2020/03/16 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
类的核心特性有哪些
2014/01/01 面试题
.net软件工程师面试题
2015/03/31 面试题
施工班组长岗位职责
2014/01/05 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书