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为何在IE/Firefox下均无法使用
Jan 22 Javascript
jquery 插件开发备注
Aug 27 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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/03/05 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
后勤人员岗位职责
2013/12/17 职场文书
暑期研修感言
2014/02/17 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
医生个人年终总结
2015/02/28 职场文书
校长师德表现自我评价
2015/03/04 职场文书
圣诞晚会主持词
2015/07/01 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书