JS封装cavans多种滤镜组件

目录

一.实现思路二.cavans前置准备1.获取cavans2.获取2d context对象3.绘制图片到cavans上4.获取在cavans上已绘制图片数据三.原理及实现1.黑白调2.灰色调3.反转4.复古5.红色蒙版6.增加亮度7.浮雕8.雾化9.毛玻璃10.马赛克11.模糊四.使用

​​前地理小论文言:

图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。本文以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    } el 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.复古

原理：笔记本amd显卡排行rgb值乘以固定的数值

pia(imagedata) {  let data = imagedata.data;  for (let i = 0; i < data.length; i += 4lol寡妇打野) {    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.tolocalelowerca().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内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！