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第一课
Feb 27 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
JS中的作用域链
Mar 01 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
js+css实现扇形导航效果
Aug 18 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
实用函数3
2007/11/08 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php内嵌函数用法实例
2015/03/20 PHP
php中动态变量用法实例
2015/06/10 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
原生js实现密码强度验证功能
2020/03/18 Javascript
Python 爬虫的工具列表大全
2016/01/31 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python实现简单的语音识别系统
2017/12/13 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
数控加工专业毕业生自荐信
2013/09/27 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
政协委员个人总结
2015/03/03 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python