[前端] canvas进阶之常用滤镜

2024-05-05 09:48

本文主要是介绍[前端] canvas进阶之常用滤镜,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在操作之前先上一张初始预览图,页面的布局结果就是这样,然后就是对各种滤镜效果的转换

 

主要的实现原理是改变像素 rgb的值

 

接下来进入正题,进入代码操作

HTML布局:

 

<div style="overflow: hidden;"><canvas id="canvasa" width="455" height="248" style="display:block;float:left;border:1px solid #aaa;"></canvas><canvas id="canvasb" width="455" height="248" style="display:block;float:left;border:1px solid #aaa;"></canvas>
</div><div style=" margin-top:20px;font-size:20px;"><a href = "javascript:greyEffect()" >灰度</a><a href = "javascript:blackEffect()" >黑白</a><a href = "javascript:reverseEffect()" >反色</a><a href = "javascript:blurEffect()" >模糊</a><a href = "javascript:mosaicEffect()" >像素化</a>
</div>

 

 

 

JS脚本:

a、初始化

 

var canvasa = document.getElementById("canvasa");
var contexta = canvasa.getContext("2d");var canvasb = document.getElementById("canvasb");
var contextb = canvasb.getContext("2d");var image = new Image();window.onload = function(){image.src = "lol.jpg";image.onload = function(){contexta.drawImage( image , 0 , 0 , canvasa.width , canvasa.height );}
}

 

 

 

b、各种滤镜效果函数

1、灰度滤镜

 

function greyEffect(){var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height );var pixelData = imageData.data;for( var i = 0 ; i < canvasb.width * canvasb.height ; i ++ ){var r = pixelData[i*4+0];var g = pixelData[i*4+1];var b = pixelData[i*4+2];var grey = r*0.3+g*0.59+b*0.11;pixelData[i*4+0] = grey;pixelData[i*4+1] = grey;pixelData[i*4+2] = grey;}contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width , canvasb.height );
}

 

 

 

效果:

 

2、黑白滤镜

 

function blackEffect(){var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height );var pixelData = imageData.data;for( var i = 0 ; i < canvasb.width * canvasb.height ; i ++ ){var r = pixelData[i*4+0];var g = pixelData[i*4+1];var b = pixelData[i*4+2];var grey = r*0.3+g*0.59+b*0.11;if(grey > 125){pv = 255;}else{pv = 0;}pixelData[i*4+0] = pv;pixelData[i*4+1] = pv;pixelData[i*4+2] = pv;}contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasa.width , canvasa.height );
}

 

 

 

效果:

 

3、反色滤镜

 

function reverseEffect(){var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height );var pixelData = imageData.data;for( var i = 0 ; i < canvasb.width * canvasb.height ; i ++ ){var r = pixelData[i*4+0];var g = pixelData[i*4+1];var b = pixelData[i*4+2];pixelData[i*4+0] = 255 - r;pixelData[i*4+1] = 255 - g;pixelData[i*4+2] = 255 - b;}contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width , canvasb.height );
}

 

 

 

效果:

 

4、模糊滤镜

 

function blurEffect(){var tmpImageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height );var tmpPixelData = tmpImageData.data;var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height );var pixelData = imageData.data;var blurR = 3;var totalnum = (2*blurR + 1)*(2*blurR + 1);for( var i = blurR ; i < canvasb.height - blurR ; i ++ )for( var j = blurR ; j < canvasb.width - blurR ; j ++ ){var totalr = 0 , totalg = 0 , totalb = 0;for( var dx = -blurR ; dx <= blurR ; dx ++ )for( var dy = -blurR ; dy <= blurR ; dy ++ ){var x = i + dx;var y = j + dy;var p = x*canvasb.width + y;totalr += tmpPixelData[p*4+0];totalg += tmpPixelData[p*4+1];totalb += tmpPixelData[p*4+2];}var p = i*canvasb.width + j;pixelData[p*4+0] = totalr / totalnum;pixelData[p*4+1] = totalg / totalnum;pixelData[p*4+2] = totalb / totalnum;}contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width , canvasb.height );
}

 

 

 

效果:

 

5、像素化滤镜

 

function mosaicEffect(){var tmpImageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height );var tmpPixelData = tmpImageData.data;var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height );var pixelData = imageData.data;var size = 16;var totalnum = size*size;for( var i = 0 ; i < canvasb.height ; i += size )for( var j = 0 ; j < canvasb.width ; j += size ){var totalr = 0 , totalg = 0 , totalb = 0;for( var dx = 0 ; dx < size ; dx ++ )for( var dy = 0 ; dy < size ; dy ++ ){var x = i + dx;var y = j + dy;var p = x*canvasb.width + y;totalr += tmpPixelData[p*4+0];totalg += tmpPixelData[p*4+1];totalb += tmpPixelData[p*4+2];}var p = i*canvasb.width+j;var resr = totalr / totalnum;var resg = totalg / totalnum;var resb = totalb / totalnum;for( var dx = 0 ; dx < size ; dx ++ )for( var dy = 0 ; dy < size ; dy ++ ){var x = i + dx;var y = j + dy;var p = x*canvasb.width + y;pixelData[p*4+0] = resr;pixelData[p*4+1] = resg;pixelData[p*4+2] = resb;}}contextb.putImageData( imageData , 0 , 0 , 0 , 0 , canvasb.width, canvasb.height );}

 

 

 

效果:

 

 

知识点:

1、putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight) 方法参数详解

 

参数描述
imgData规定要放回画布的 ImageData 对象。
xImageData 对象左上角的 x 坐标,以像素计。
yImageData 对象左上角的 y 坐标,以像素计。
dirtyX可选。水平值(x),以像素计,在画布上放置图像的位置。
dirtyY可选。水平值(y),以像素计,在画布上放置图像的位置。
dirtyWidth可选。在画布上绘制图像所使用的宽度。
dirtyHeight可选。在画布上绘制图像所使用的高度。

 

图解:

 

 

2、与之对应的是getImageData(x, y, width, height)

 

参数描述
x开始复制的左上角位置的 x 坐标。
y开始复制的左上角位置的 y 坐标。
width将要复制的矩形区域的宽度。
height将要复制的矩形区域的高度。

 

改变色相(代码不全):

 

 

var rgb = $(this).css('background-color');  // 获取背景rgb颜色
var rgbArr = rgb.match(/\d+/g); // 转换成数组

 

 

 

 

/* 渲染表带颜色 @param rgbArr array (rgb颜色值)*/
this.renderColor = function(rgbArr) {var canvas = document.getElementById('watchBandCanvas');var ctx = canvas.getContext('2d');var img = new Image();img.src = $('.img-watch-band').attr('src');img.onload = function() {var width = img.width;var height = img.height;canvas.width = width;canvas.height = height;ctx.drawImage(img, 0, 0);var imgData = ctx.getImageData(0, 0, width, height);for( var i=0; i<imgData.data.length; i+=4){imgData.data[i+0] = rgbArr[0] - imgData.data[i+0];imgData.data[i+1] = rgbArr[1] - imgData.data[i+1];imgData.data[i+2] = rgbArr[2] - imgData.data[i+2];}ctx.putImageData(imgData, 0, 0, 0, 0, width, height);}
}

 

欢迎关注技术开发分享录:http://fenxianglu.cn/

 

这篇关于[前端] canvas进阶之常用滤镜的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/961409

相关文章

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll