JavaScript多种滤镜算法实现代码实例
更新时间：2019年12月10日 10:16:52 作者：夜焰悠
这篇文章主要介绍了JavaScript多种滤镜算法实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要介绍了JavaScript多种滤镜算法实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1.灰色滤镜
设定R,G,B值相等
function makeGray(img){
for(var pixel of img.values()){
var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
pixel.setRed(avg);
pixel.setGreen(avg);
pixel.setBlue(avg);
}
return img;
}
2.单色滤镜（以红色为例）
计算R,G,B的均值avg，判断avg是否小于128.
function makeRed(img){
for(var pixel of img.values()){
var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
if(avg<128){
pixel.setRed(2*avg);
pixel.setGreen(0);
pixel.setBlue(0);
}
else{
pixel.setRed(255);
pixel.setGreen(2*avg-255);
pixel.setBlue(2*avg-255);
}
}
return img;
}
3.彩色滤镜
function makeRainbow(img){
for(var pixel of img.values()){
var x = pixel.getX();
var y = pixel.getY();
var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;
var h = img.height;
if(y<h/7){
if(avg<128){
pixel.setRed(2*avg);
pixel.setGreen(0);
pixel.setBlue(0);
}
else{
pixel.setRed(255);
pixel.setGreen(2*avg-255);
pixel.setBlue(2*avg-255);
}
}
if(y>=h/7 && y<h*2/7){
if(avg<128){
pixel.setRed(2*avg);
pixel.setGreen(0.8*avg);
pixel.setBlue(0);
}
else{
pixel.setRed(255);
pixel.setGreen(1.2*avg-51);
pixel.setBlue(2*avg-255);
}
}
if(y>=h*2/7 && y<h*3/7){
if(avg<128){
pixel.setRed(2*avg);
pixel.setGreen(2*avg);
pixel.setBlue(0);
}
else{
pixel.setRed(255);
pixel.setGreen(255);
pixel.setBlue(2*avg-255);
}
}
if(y>=h*3/7 && y<h*4/7){
if(avg<128){
pixel.setRed(0);
pixel.setGreen(2*avg);
pixel.setBlue(0);
}
else{
pixel.setRed(2*avg-255);
pixel.setGreen(255);
pixel.setBlue(2*avg-255);
}
}
if(y>=h*4/7 && y<h*5/7){
if(avg<128){
pixel.setRed(0);
pixel.setGreen(0);
pixel.setBlue(2*avg);
}
else{
pixel.setRed(2*avg-255);
pixel.setGreen(2*avg-255);
pixel.setBlue(255);
}
}
if(y>=5*h/7 && y<h*6/7){
if(avg<128){
pixel.setRed(0.8*avg);
pixel.setGreen(0);
pixel.setBlue(2*avg);
}
else{
pixel.setRed(1.2*avg-51);
pixel.setGreen(2*avg-255);
pixel.setBlue(255);
}
}
if(y>=h*6/7){
if(avg<128){
pixel.setRed(1.6*avg);
pixel.setGreen(0);
pixel.setBlue(1.6*avg);
}
else{
pixel.setRed(0.4*avg+153);
pixel.setGreen(2*avg-255);
pixel.setBlue(0.4*avg+153);
}
}
}
return img;
}
4.模糊滤镜
（1）生成（0，1）之间的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇JS倒计时实例_天时分秒。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文给大家介绍的是使用传统事件的方法来模拟现代事件，十分的简单实用，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要为大家详细介绍了js前端日历控件，可根据日期自定义日历上某日的颜色，另外可以悬浮，拖拽，自由变形2017-03-03
这篇文章主要介绍了js+canvas实现滑动拼图验证码功能，本文结合实例代码分步骤给大家介绍的非常详细,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
bootstrap日期插件daterangepicker使用详解
这篇文章主要为大家详细介绍了bootstrap日期插件daterangepicker的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了JS运动改变单物体透明度的方法,结合实例形式分析了页面元素属性动态修改相关操作技巧,需要的朋友可以参考下2018-01-01
如果有一定的JavaScript基础，制作浮动广告还是比较容易的,利用闲暇时间简单制作了一个，感兴趣的朋友可以参考下哦2012-12-12
JS使用window.requestAnimationFrame()实现逐帧动画
这篇文章介绍了JS使用window.requestAnimationFrame()实现逐帧动画的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了JavaScript实现文字展开和收起效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论