扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS封装cavans多种滤镜组件
  • 218

0
分享到

JS封装cavans多种滤镜组件

2024-04-02 19:04:59 218人浏览 独家记忆
摘要

目录一.实现思路二.cavans前置准备1.获取cavans2.获取2d context对象3.绘制图片到cavans上4.获取在cavans上已绘制图片数据三.原理及实现1.黑白调

​​前言:

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

效果展示:

一.实现思路

我们知道每张图片都是由若干像素组成，得到的像素是一个数组，颜色又是由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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JS封装cavans多种滤镜组件

本文链接: https://lsjlt.com/news/139295.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS封装cavans多种滤镜组件
    目录一.实现思路二.cavans前置准备1.获取cavans2.获取2d context对象3.绘制图片到cavans上4.获取在cavans上已绘制图片数据三.原理及实现1.黑白调...
    99+
    2024-04-02
  • JS如何封装cavans多种滤镜组件
    这篇文章给大家分享的是有关JS如何封装cavans多种滤镜组件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果展示:一.实现思路我们知道每张图片都是由若干像素组成，得到的像素是一个数组，颜色又是由RGBA组成，...
    99+
    2023-06-29
  • JS组件封装的示例分析
    这篇文章主要介绍了JS组件封装的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、扩展已经存在的组件1、需求背景很多时候，我们使用j...
    99+
    2024-04-02
  • vue封装组件js实例分析
    本文小编为大家详细介绍“vue封装组件js实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue封装组件js实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。什么是组件化：组件化就是将一个页面拆分成一...
    99+
    2023-06-30
  • vue封装组件js版基本步骤
    目录什么是组件化：Vue组件化思想一.注册组件的基本步骤1.创建组件构造器c-input2.注册组件3.父组件使用二.丰富组件三.父子组件间的通讯1.父---->子通信 [pr...
    99+
    2024-04-02
  • JS组件之bootstrap treegrid组件封装的示例分析
    小编给大家分享一下JS组件之bootstrap treegrid组件封装的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！...
    99+
    2024-04-02
  • vue3封装放大镜组件的实例代码
    目录组件基础结构 目的：实现图片放大镜功能安装vueuse功能实现 完整代码 总结组件基础结构 结尾有完整代码可直接复制使用 目的：封装图片预览组件，实现鼠标悬停切换效果 落地代...
    99+
    2024-04-02
  • JS组件封装之监听localStorage的变化
    前言： 由于在平时开发中，经常或不经常的用到一些功能或插件或函数，回头找起来还挺麻烦，我的想法是我直接将他们全部的封装成一个个的组件，做到“”拿来即用&ldq...
    99+
    2024-04-02
  • Vue图片放大镜组件的封装使用详解
    基于Vue的图片放大镜组件封装，供大家参考，具体内容如下 图片放大镜的实现过程是将一个小图放置在一个盒子里,当鼠标在小图盒子里移动时，出现一个移动块(阴影区域/遮罩层),右侧大图片盒...
    99+
    2024-04-02
  • JS实现数组过滤从简单到多条件筛选
    目录单条件单数据筛选 单条件多数据筛选 多条件单数据筛选 多条件多数据筛选 知识点1: Object.key() 获取数组索引或者对象属性知识点2: js里的falsy 知识点3: ...
    99+
    2024-04-02
  • vue 的全选组件封装你知道多少
    效果  封装的组件 <template> <el-form-item :label="label"> <el-checkbox ...
    99+
    2024-04-02
  • vue3封装京东商品详情页放大镜效果组件
    本文实例为大家分享了vue3封装类似京东商品详情页放大镜效果组件的具体代码，供大家参考，具体内容如下 首先先完成基本布局 完成图片的切换效果，通过 mouseenter 事件切...
    99+
    2024-04-02
  • JS怎么实现数组过滤从简单到多条件筛选
    本篇内容主要讲解“JS怎么实现数组过滤从简单到多条件筛选”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JS怎么实现数组过滤从简单到多条件筛选”吧!目录单条件单数据筛选单条件多数据筛选多条件单数据...
    99+
    2023-06-20
  • vue实现检测敏感词过滤组件的多种思路
    目录写在前面需求分析v1思路一：使用截流方法监听输入框的input事件思路二：使用输入框的失焦和保存按钮的点击事件思路三：使用mixins抽取敏感词检测方法思路四：使用promise...
    99+
    2024-04-02
  • vue中手动封装iconfont组件解析(三种引用方式的封装和使用)
    目录准备封装unicode引用封装font-class引用封装symbol引用封装引入全局引入局部引入使用在线使用 有时候会因网络问题影响用户体验；直接放在 本地使用 ，如果过多使用...
    99+
    2024-04-02
  • vue3自己封装面包屑功能组件的几种方式
    目录前言 一、为什么需要面包屑？ 二、初级封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足 三、进阶封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足 四、高阶...
    99+
    2024-04-02
  • flutter封装点击菜单工具栏组件checkBox多选版
    目录效果展示实现代码代码调用效果展示 单选版可看上篇博文 用flutter封装一个点击菜单工具栏组件 本文是CHeckbox多选版 效果如图所示，点击选项回调选中的inde...
    99+
    2024-04-02
  • flutter怎么封装点击菜单工具栏组件checkBox多选版
    这篇“flutter怎么封装点击菜单工具栏组件checkBox多选版”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“flutt...
    99+
    2023-06-30
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作