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 相关文章推荐
jquery 插件学习(四)
Aug 06 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
React中的render何时执行过程
Apr 13 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拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
Javascript !!的作用
2008/12/04 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
Javascript复制实例详解
2016/01/28 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
django-csrf使用和禁用方式
2020/03/13 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
《美丽的公鸡》教学反思
2014/02/25 职场文书
财产公证书格式
2014/04/10 职场文书
财务部绩效考核方案
2014/05/04 职场文书
安全宣传标语口号
2014/06/06 职场文书
治庸问责心得体会
2014/09/12 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
行政申诉状范文
2015/05/20 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
PHP使用QR Code生成二维码实例
2021/07/07 PHP