JS封装cavans多种滤镜组件


Posted in Javascript onFebruary 15, 2022

​​前言:

图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工和处理。本文以javascript为基础,用html5 + cavans实现多种常见的滤镜效果,并且封装成可调用的js文件(filter.js),且支持本地保存图片。

效果展示:

JS封装cavans多种滤镜组件

一.实现思路

我们知道每张图片都是由若干像素组成,得到的像素是一个数组,颜色又是由RGBA组成,所以数组中每4个点组成一个颜色值,要去实现每个滤镜的特效,就要去有规律的去改变像素值。当我们拿到图片并且通过ctx.drawImage()方法绘制到cavans中后,可以通过ctx.getImageData()方法来获取图片数据。然后就可以通过filter.js来调用方法实现滤镜效果。

二.cavans前置准备

1.获取cavans

let filterCavans = document.getElementById("filterCavans");
filterCavans.width = img.clientWidth;
filterCavans.height = img.clientHeight;

2.获取2d context对象

ctx = filterCavans.getContext("2d");

3.绘制图片到cavans上

let img = document.getElementById("img");
ctx.drawImage(img, 0, 0, img.clientWidth, img.clientHeight);

4.获取在cavans上已绘制图片数据

canvasData = ctx.getImageData( 0, 0, filterCavans.width, filterCavans.height);

三.原理及实现

1.黑白调

原理:判断当前像素的RGB值是否大于255的一半,如大于就全部设置为255,小于就全部设为0

blackWhite(imageData) {
    //所在区域图片的像素集
    let data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        if (r > 255 / 2) {
            data[i] = 255
            data[i + 1] = 255
            data[i + 2] = 255
        } else if (r < 255 / 2) {
            data[i] = 0
            data[i + 1] = 0
            data[i + 2] = 0
        }
    }
}

2.灰色调

原理:把当前像素的RGB值 设置为当前像素RGB的平均值

gray(imageData) {
    let data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        let average = Math.floor((r + g + b) / 3);
        data[i] = average;
        data[i + 1] = average;
        data[i + 2] = average;
    }
}

3.反转

原理:用255减去当前像素的RGB值

toggle(imageData) {
    let data = imageData.data;
    for (let i = 0, len = data.length; i < len; i += 4) {
        data[i] = 255 - data[i];
        data[i + 1] = 255 - data[i + 1]
        data[i + 2] = 255 - data[i + 2];
    }
}

4.复古

原理:RGB值乘以固定的数值

sepia(imageData) {
    let data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        data[i] = (r * 0.393) + (g * 0.769) + (b * 0.189);
    }
}

5.红色蒙版

原理:红色通道取平均值,绿色通道和蓝色通道都设为0

myRed(imageData) {
    let data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        data[i] = (r + g + b) / 3;
        data[i + 1] = 0;
        data[i + 2] = 0;
    }
}

6.增加亮度

原理:RGB值直接加上所需要设置亮度delta

brightness(imageData, delta) {
    let data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        data[i] += delta;
        data[i + 1] += delta;
        data[i + 2] += delta;
    }
}

7.浮雕

原理:每个像素的RGB值都设置为该位置的初始值 num 减去其上一个像素值得差,最后统一加上128用于控制灰度

carve(imageData) {
    let w = imageData.width, h = imageData.height;
    let data = imageData.data;
    for (let i = h; i > 0; i--) {  // 行
        for (let j = w; j > 0; j--) {  // 列
            for (let k = 0; k < 3; k++) {
                let num = (i * w + j) * 4 + k;
                let numUp = ((i - 1) * w + j) * 4 + k;
                let numDown = ((i + 1) * w + j) * 4 + k;
                data[num] = data[num] - data[numUp - 4] + 128;
            }
        }
    }
}

8.雾化

原理:通过随机方法来设置当前像素点周围的255白色值

fog(imageData) {
    let w = imageData.width, h = imageData.height;
    let data = imageData.data;
    for (let i = h; i > 0; i--) {  // 行
        for (let j = w; j > 0; j--) {  // 列
            let num = (i * w + j) * 4;
            if (Math.random() < 0.1) {
                data[num] = 255;
                data[num + 1] = 255;
                data[num + 2] = 255;
            }
        }
    }
}

9.毛玻璃

原理:用当前点四周一定范围内任意一点的颜色来替代当前点颜色,最常用的是随机的采用相邻点进行替代。

spread(canvasData) {
    let w = canvasData.width, h = canvasData.height;
    for (let i = 0; i < h; i++) {
        for (let j = 0; j < w; j++) {
            for (let k = 0; k < 3; k++) {
                // Index of the pixel in the array  
                let num = (i * w + j) * 4 + k;
                let rand = Math.floor(Math.random() * 10) % 3;
                let num2 = ((i + rand) * w + (j + rand)) * 4 + k;
                canvasData.data[num] = canvasData.data[num2]
            }
        }
    }
}

10.马赛克

原理:将图像分成大小一致的图像块,每一个图像块都是一个正方形,并且在这个正方形中所有像素值都相等。我们可以将这个正方形看作是一个模板窗口,模板中对应的所有图像像素值都等于该模板的左上角第一个像素的像素值,这样的效果就是马赛克效果,而正方形模板的大小则决定了马赛克块的大小,即图像马赛克化的程度。

mosaic(imageData, size) {
    let w = imageData.width, h = imageData.height;
    let data = imageData.data;
    for (let i = 1; i < h - 1; i += size) {
        for (let j = 1; j < w - 1; j += size) {
            let num = (i * w + j) * 4;
            for (let dx = 0; dx < size; dx++) {
                for (let dy = 0; dy < size; dy++) {
                    let x = i + dx;
                    let y = j + dy;
                    let p1 = (x * w + y) * 4;

                    data[p1 + 0] = data[num + 0];
                    data[p1 + 1] = data[num + 1];
                    data[p1 + 2] = data[num + 2];
                }
            }
        }
    }

11.模糊

原理:将当前像素的周边像素的RGB值各自的平均值作为新的RGB值

myBlur(imageData) {
    let w = imageData.width, h = imageData.height;
    let data1 = imageData.data;
    let data2 = imageData.data;

    for (let i = 0; i < h; i++) {  // 行
        for (let j = 0; j < w; j++) {  // 列
            for (let k = 0; k < 3; k++) {
                let num = (i * w + j) * 4 + k;
                let numUp = ((i - 1) * w + j) * 4 + k;
                let numDown = ((i + 1) * w + j) * 4 + k;
                // 对另开内存的data1的改变为什么会反应到data中
                data1[num] = (data2[numUp - 4] + data2[numUp] + data2[numUp + 4]
                    + data2[num - 4] + data2[num] + data2[num + 4]
                    + data2[numDown - 4] + data2[numDown] + data2[numDown + 4]) / 9;
            }
        }
    }
}

四.使用

//黑白调
filter.blackWhite(canvasData);

//保存图片
save() {
    this.download("png");
},
//利用a标签下载
download(type) {
    //设置保存图片的类型
    let imgdata = filterCavans.toDataURL(type);
    //将mime-type改为image/octet-stream,强制让浏览器下载
    let fixtype = function (type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, "jpeg");
        let r = type.match(/png|jpeg|bmp|gif/)[0];
        return "image/" + r;
    };
    imgdata = imgdata.replace(fixtype(type), "image/octet-stream");
    //将图片保存到本地
    let saveFile = function (data, filename) {
        let link = document.createElement("a");
        link.href = data;
        link.download = filename;
        link.click();
    };
    let filename = new Date().toLocaleDateString() + "." + type;
    saveFile(imgdata, filename);
}

到此这篇关于JS封装cavans多种滤镜组件的文章就介绍到这了,更多相关JS封装cavans内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
HTML+JS实现在线朗读器
Feb 15 #Javascript
js中Map和Set的用法及区别实例详解
Feb 15 #Javascript
canvas实现贪食蛇的实践
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
JavaScript实例 ODO List分析
Jan 22 #Javascript
JavaScript ES6的函数拓展
Jan 18 #Javascript
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
You might like
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
vue如何实现动态加载脚本
2020/02/05 Javascript
Python实现二分查找算法实例
2015/05/26 Python
python 循环while和for in简单实例
2016/08/16 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
python空元组在all中返回结果详解
2020/12/15 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
造价工程师个人求职信
2013/09/21 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
2014年度个人总结范文
2015/03/09 职场文书
高三化学教学反思
2016/02/22 职场文书