JavaScript如何对图片进行黑白化
HTML5推出了<canvas>元素，使我们可以通过js动态的在 <canvas> 这个区域之中进行图像的绘制。而我们这次对图像的黑白化就是使用js操作<canvas>元素 来实现的。
先看一下效果图
左侧为 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如何对图片进行黑白化，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
下面小编就为大家带来一篇浅谈JS函数定义方式的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
JS getRandomValues和Math.random方法深入解析
这篇文章主要为大家介绍了JS getRandomValues和Math.random方法深入详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家详细介绍了 Bootstrap 3 浏览器兼容性问题及其对应的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
在客户端存储数据时，我们一般都用cookie(不敏感数据)，但是在客户端越来越富的今天，cookie可存储的量(每个域最大4k)实在是小,已经满足不了我们的需求2012-11-11
在WEB开发中，javascript提供了许多函数供开发人员使用，这些函数在Ajax流行前足够了，但要构建一个交互性强些的应用恐怕就麻烦了。2009-10-10
JavaScript使ifram跨域相互访问及与PHP通信的实例
这篇文章主要介绍了JavaScript使ifram跨域相互访问及与PHP通信的实例,同时对同域间的访问也作了详细的演示,需要的朋友可以参考下2016-03-03
这篇文章主要为大家详细介绍了微信小程序自定义地址组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了avaScript的语法规则，本文的语法讲解主要讲一下与其他语言的区别，下面详细的介绍内容，需要的小伙伴可以参考一下，希望对你有所帮助2022-02-02
这篇文章主要为大家详细介绍了采用访问器监听的方式实现简单数据双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文主要对js中script标签中的预解析进行详细介绍。具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
最新评论