canvas 滤镜大全
Posted 非渔驿站
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 滤镜大全相关的知识，希望对你有一定的参考价值。
你要的都在这里：
html：上面原图，下面效果
<canvas id="canvasa" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa;">
你的浏览器不支持canvas
</canvas>
<canvas id="canvasb" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa;">
你的浏览器不支持canvas
</canvas>
事件触发代码：
<a href="javascript: greyEffect()" >grey</a>
<a href="javascript: blackWhite()" >blackWhite</a>
<a href="javascript: blackAndWhite2()" >blackWhite2</a>
<a href="javascript: blackAndWhite3()" >blackWhite3</a>
<a href="javascript: reverEffect()" >reverEffect</a>
<a href="javascript: onlyGeffect()" >onlyGeffect</a>
<a href="javascript: oldEffect()" >oldEffect</a>
<a href="javascript: comic()" >comic</a>
<a href="javascript: sepia()" >sepia</a>
<a href="javascript: negative()" >negative</a>
<a href="javascript: noise()" >noise</a>
<a href="javascript: contrast(60)" >contrast+</a>
<a href="javascript: contrast(-100)" >contrast-</a>
<a href="javascript: ex10()" >对比度</a>
<a href="javascript: ex05()" >锐化</a>
<a href="javascript: ex06()" >彩色边缘增强</a>
<a href="javascript: ex03()" >边缘增强无机物剔除</a>
<a href="javascript: ex04()" >边缘增强有机物剔除</a>
<a href="javascript: ex11()" >边缘检测</a>
<a href="javascript: ex09()" >边缘检测2</a>
<a href="javascript: demo()" >边缘检测3</a>
<a href="javascript: brightness(20)" >brightness+</a>
<a href="javascript: brightness(-60)" >brightness-</a>
<a href="javascript: vintage()" >vintage</a>
<a href="javascript: cartoon()" >cartoon</a>
<a href="javascript: crayon()" >crayon</a>
<a href="javascript: crossProcess()" >crossProcess</a>
<a href="javascript: outlineStrong()" >outlineStrong</a>
<a href="javascript: outline()" >outline</a>
<a href="javascript: casting()" >casting</a>
<a href="javascript: fudiaoEffect()" >fudiaoEffect</a>
<a href="javascript: Gaussian_blur()" >Gaussian_blur</a>
<a href="javascript: bwgyRv()" >bwgyRv</a>
<a href="javascript: bwAddan(true)" >bwAdd暗</a>
<a href="javascript: bwAddan(false)" >bwAdd亮</a>
<a href="javascript: contrastaddan(60)" >彩色增暗</a>
<a href="javascript: blueOnlyFillter()" >blueOnlyFillter</a>
<a href="javascript: wujiOnlyFillter()" >wujiOnlyFillter</a>
<a href="javascript: blueOnlyFillteran()" >有机物剔除增暗</a>
<a href="javascript: blueOnlyFillterliang()" >有机物剔除增亮</a>
<a href="javascript: wujiOnlyFillteran()" >无机物剔除增暗</a>
<a href="javascript: wujiOnlyFillterliang()" >无机物剔除增亮</a>
<br />
颜色滤镜
<a href="javascript: greenFillter()" >greenFillter</a>
<a href="javascript: blueFillter()" >blueFillter</a>
<a href="javascript: yellowFillter()" >yellowFillter</a>
<a href="javascript: redFillter()" >redFillter</a>
<a href="javascript: zsFillter()" >zsFillter</a>
<a href="javascript: qsFillter()" >qsFillter</a>
javascript：
<script>
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 = "./lugage.png";
image.onload = function () {
contexta.drawImage(image, 0 , 0 ,canvasa.width, canvasa.height);
};
};
//灰度效果
function greyEffect(){
console.log("conme");
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[4*i + 0];//r
var g = pixelData[4*i + 1];//g
var b = pixelData[4*i + 2];//b
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);
}
//黑白效果
function blackWhite(){
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 v
var r = pixelData[4*i + 0];//r
var g = pixelData[4*i + 1];//g
var b = pixelData[4*i + 2];//b
var grey = r*0.3 + g*0.59 +b*0.11;
if(grey>255/2){
v = 255;
}else{
v=0;
}
pixelData[i*4 + 0] = v;
pixelData[i*4 + 1] = v;
pixelData[i*4 + 2] = v;
/* var n = (r + g +b)/3;
t.data[o] = n>128 ? 255 :0;
t.data[o + 1] = n>128 ? 255 :0;
t.data[o + 2] = n>128 ? 255 :0;*/
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//底片效果
function reverEffect(){
console.log("conme");
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[4*i + 0];//r
var g = pixelData[4*i + 1];//g
var b = pixelData[4*i + 2];//b
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);
}
//黑白灰度反转
function bwgyRv(){
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 v
var r = pixelData[4*i + 0];//r
var g = pixelData[4*i + 1];//g
var b = pixelData[4*i + 2];//b
var grey = r*0.3 + g*0.59 +b*0.11;
if(grey>255/2){
v = 255;
}else{
v=0;
}
pixelData[i*4 + 0] = v;
pixelData[i*4 + 1] = v;
pixelData[i*4 + 2] = v;
r = pixelData[4*i + 0];//r
g = pixelData[4*i + 1];//g
b = pixelData[4*i + 2];//b
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;
r = pixelData[4*i + 0];//r
g = pixelData[4*i + 1];//g
b = pixelData[4*i + 2];//b
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);
}
// 黑白 增暗
function bwAddan(flag){
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 v;
var r = pixelData[4*i + 0];//r
var g = pixelData[4*i + 1];//g
var b = pixelData[4*i + 2];//b
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;
}
if(flag == true){
//增暗
brightness(-60,imageData);
}else{
//增亮
brightness(10,imageData);
}
}
//只显示蓝色
function onlyGeffect(){
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[4*i + 0];//r
var g = pixelData[4*i + 1];//g
var b = pixelData[4*i + 2];//b
if(b>r && b>g){
pixelData[i*4 + 0] = r;
pixelData[i*4 + 1] = g;
pixelData[i*4 + 2] = b;
}else{
pixelData[i*4 + 0] = r;
pixelData[i*4 + 1] = g;
pixelData[i*4 + 2] = b;
pixelData[i*4 + 3] = pixelData[i*4 + 3] * 0.5;
}
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//只显示黄色
function onlyGeffect(){
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[4*i + 0];//r
var g = pixelData[4*i + 1];//g
var b = pixelData[4*i + 2];//b
if(b>r && b>g){
pixelData[i*4 + 0] = r;
pixelData[i*4 + 1] = g;
pixelData[i*4 + 2] = b;
}else{
pixelData[i*4 + 0] = r;
pixelData[i*4 + 1] = g;
pixelData[i*4 + 2] = b;
pixelData[i*4 + 3] = pixelData[i*4 + 3] * 0.5;
}
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//怀旧效果
function oldEffect(){
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for ( var x = 0; x < canvasa.width; x++) {
for ( var y = 0; y < canvasa.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasa.width) * 4;
var r = pixelData[idx + 0];
var g = pixelData[idx + 1];
var b = pixelData[idx + 2];
var dr=.393*r+.769*g+.189*b;
var dg=.349*r+.686*g+.168*b;
var db=.272*r+.534*g+.131*b;
var scale=Math.random()*0.5 + 0.5;
var fr=scale*dr+(1-scale)*r;
scale=Math.random()*0.5 + 0.5;
var fg=scale*dg+(1-scale)*g;
scale=Math.random()*0.5 + 0.5;
var fb=scale*db+(1-scale)*b;
pixelData[idx + 0] = fr; // Red channel
pixelData[idx + 1] = fg; // Green channel
pixelData[idx + 2] = fb; // Blue channel
pixelData[idx + 3] = 255; // Alpha channel
// add black border
if(x < 8 || y < 8 || x > (canvasa.width - 8) || y > (canvasa.height - 8))
{
pixelData[idx + 0] = 0;
pixelData[idx + 1] = 0;
pixelData[idx + 2] = 0;
}
}
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//6.连环画效果
//连环画的效果与图像灰度化后的效果相似,它们都是灰度图,但连环画增大了图像的对比度,使整体明暗效果更强.
//算法:
//R = |g – b + g + r| * r / 256
//G = |b – g + b + r| * r / 256;
//B = |b – g + b + r| * g / 256;
function comic(){
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for ( var x = 0; x < canvasa.width; x++) {
for ( var y = 0; y < canvasa.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasa.width) * 4;
var r = pixelData[idx + 0];
var g = pixelData[idx + 1];
var b = pixelData[idx + 2];
var fr=Math.abs((g-r+g+b))*r/256;
var fg=Math.abs((b-r+g+b))*r/256;
var fb=Math.abs((b-r+g+b))*g/256;
//var fr=(g-r+g+b)*r/256;
//var fg=(b-r+g+b)*r/256;
//var fb=(b-r+g+b)*g/256;
pixelData[idx + 0] = fr; // Red channel
pixelData[idx + 1] = fg; // Green channel
pixelData[idx + 2] = fb; // Blue channel
pixelData[idx + 3] = 255; // Alpha channel
// add black border
if(x < 8 || y < 8 || x > (canvasa.width - 8) || y > (canvasb.height - 8))
{
pixelData[idx + 0] = 0;
pixelData[idx + 1] = 0;
pixelData[idx + 2] = 0;
}
}
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//7.熔铸效果
//熔铸算法
//r = r*128/(g+b +1);
//g = g*128/(r+b +1);
//b = b*128/(g+r +1);
function casting(canvasData){
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for ( var x = 0; x < canvasa.width; x++) {
for ( var y = 0; y < canvasa.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasa.width) * 4;
var r = pixelData[idx + 0];
var g = pixelData[idx + 1];
var b = pixelData[idx + 2];
var fr= r*128/(g+b +1);
var fg=g*128/(r+b +1);
var fb=b*128/(g+r +1);
//assign gray scale value
pixelData[idx + 0] = fr; // Red channel
pixelData[idx + 1] = fg; // Green channel
pixelData[idx + 2] = fb; // Blue channel
pixelData[idx + 3] = 255; // Alpha channel */
// add black border
if(x < 8 || y < 8 || x > (canvasa.width - 8) || y > (canvasa.height - 8))
{
pixelData[idx + 0] = 0;
pixelData[idx + 1] = 0;
pixelData[idx + 2] = 0;
}
}
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//颜色滤镜
//绿色滤镜
function greenFillter(){
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//绿色滤镜的算法：当前绿色通道值G*1.4得到绿色滤镜
var g =pixelData[i+1]*1.4;
//注：当前值大于255时将其赋值255
pixelData[i+1] =g>255 ? 255 : g;
}
//将图像信息绘制第二个canvas中
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//蓝色滤镜
function blueFillter() {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜
var b = pixelData[i + 2] * 1.6;
//注：当前值大于255时将其赋值255
pixelData[i + 2] = b > 255 ? 255 : b;
}
//将图像信息绘制第二个canvas中
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//有机物剔除
function blueOnlyFillter(obj) {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
if(obj){
var imageData= obj;
}else{
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
}
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜
var r = pixelData[i] ;
var g = pixelData[i + 1] ;
var b = pixelData[i + 2] ;
if(b>=150 && g<=200 && r<=200){
g = g - 50;
r = r - 50;
}
else{
r= r+100;
g= g+100;
b= b+100;
}
pixelData[i] = r;
pixelData[i + 1] = g;
pixelData[i + 2] = b;
//注：当前值大于255时将其赋值255
}
//将图像信息绘制第二个canvas中
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//有机物剔除增亮 暗
function blueOnlyFillteran(obj) {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
if(obj){
var imageData= obj;
}else{
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
}
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜
var r = pixelData[i] ;
var g = pixelData[i + 1] ;
var b = pixelData[i + 2] ;
if(b>=150 && g<=200 && r<=200){
g = g - 50;
r = r - 50;
}
else{
r= r+100;
g= g+100;
b= b+100;
}
pixelData[i] = r;
pixelData[i + 1] = g;
pixelData[i + 2] = b;
//注：当前值大于255时将其赋值255
}
//将图像信息绘制第二个canvas中
brightness(-60,imageData);
}
function blueOnlyFillterliang(obj) {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
if(obj){
var imageData= obj;
}else{
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
}
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜
var r = pixelData[i] ;
var g = pixelData[i + 1] ;
var b = pixelData[i + 2] ;
if(b>=150 && g<=200 && r<=200){
g = g - 50;
r = r - 50;
}
else{
r= r+100;
g= g+100;
b= b+100;
}
pixelData[i] = r;
pixelData[i + 1] = g;
pixelData[i + 2] = b;
//注：当前值大于255时将其赋值255
}
//将图像信息绘制第二个canvas中
brightness(10,imageData);
}
//无机物剔除
function wujiOnlyFillter(obj) {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
if(obj){
var imageData= obj;
}else{
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
}
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜
var r = pixelData[i] ;
var g = pixelData[i + 1] ;
var b = pixelData[i + 2] ;
if(r>=150 && g<=200 && b<=200){
g = g - 50;
b = b - 50;
}
else{
r= r+100;
g= g+100;
b= b+100;
}
pixelData[i] = r;
pixelData[i + 1] = g;
pixelData[i + 2] = b;
//注：当前值大于255时将其赋值255
}
//将图像信息绘制第二个canvas中
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//无机物剔除增暗
function wujiOnlyFillteran(obj) {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
if(obj){
var imageData= obj;
}else{
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
}
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜
var r = pixelData[i] ;
var g = pixelData[i + 1] ;
var b = pixelData[i + 2] ;
if(r>=150 && g<=200 && b<=200){
g = g - 50;
b = b - 50;
}
else{
r= r+100;
g= g+100;
b= b+100;
}
pixelData[i] = r;
pixelData[i + 1] = g;
pixelData[i + 2] = b;
//注：当前值大于255时将其赋值255
}
//将图像信息绘制第二个canvas中
brightness(-60,imageData);
}
//无机物剔除增亮
function wujiOnlyFillterliang(obj) {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
if(obj){
var imageData= obj;
}else{
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
}
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//蓝色滤镜的算法：当前蓝色通道值变为原来的1.6得到蓝色滤镜
var r = pixelData[i] ;
var g = pixelData[i + 1] ;
var b = pixelData[i + 2] ;
if(r>=150 && g<=200 && b<=200){
g = g - 50;
b = b - 50;
}
else{
r= r+100;
g= g+100;
b= b+100;
}
pixelData[i] = r;
pixelData[i + 1] = g;
pixelData[i + 2] = b;
//注：当前值大于255时将其赋值255
}
//将图像信息绘制第二个canvas中
brightness(10,imageData);
}
//红色滤镜
function redFillter() {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//红色滤镜的算法：当前红色通道值变为原来的2得到红色滤镜
var r = pixelData[i] * 2;
//注：当前值大于255时将其赋值255
pixelData[i] = r > 255 ? 255 : r;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//黄色滤镜
function yellowFillter() {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//黄色滤镜的算法：红色通道值和绿色通道值增加50（红色+绿色 = 黄色）
var r = pixelData[i] +50;
var g = pixelData[i+1] +50
//注：当前值大于255时将其赋值255
pixelData[i] = r > 255 ? 255 : r;
pixelData[i+1] = g > 255 ? 255 : g;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//紫色滤镜
function zsFillter() {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//紫色滤镜的算法：红色通道值和蓝色通道值增加50（红色+蓝色 = 紫色）
var r = pixelData[i] +50;
var b = pixelData[i+2] +50
//注：当前值大于255时将其赋值255
pixelData[i] = r > 255 ? 255 : r;
pixelData[i+2] = b > 255 ? 255 : b;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//青色滤镜
function qsFillter() {
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//青色滤镜的算法：绿色通道值和蓝色通道值增加50（绿色+蓝色 = 青色）
var g = pixelData[i+1] +50;
var b = pixelData[i+2] +50
//注：当前值大于255时将其赋值255
pixelData[i+1] = g > 255 ? 255 : g;
pixelData[i+2] = b > 255 ? 255 : b;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
//浮雕效果
function fudiaoEffect(){
//获取ImageData的属性：width，height，data（包含 R G B A 四个值）；
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for(var i=0;i<pixelData.length;i += 4){
//浮雕效果的算法：当前RGB减去相邻的GRB得到的值再加上128
pixelData[i] =pixelData[i]-pixelData[i+4]+128;
pixelData[i+1] =pixelData[i+1]-pixelData[i+5]+128;
pixelData[i+2] =pixelData[i+2]-pixelData[i+6]+128;
//计算获取单位元素的RBG然后取平均值 再次灰度，优化浮雕的效果
var avg = (pixelData[i]+ pixelData[i+1]+pixelData[i+2])/3;
pixelData[i] =avg;
pixelData[i+1] =avg;
pixelData[i+2] =avg;
}
//将图像信息绘制第二个canvas中，注：一般只能在服务下运行
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
// 高斯模糊 滤镜
function Gaussian_blur() {
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
var radius = 3;
var sigma = 1;
var gaussMatrix = [],
gaussSum = 0,
x, y,
r, g, b, a,
i, j, k, len;
radius = Math.floor(radius) || 3;
sigma = sigma || radius / 3;
a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
b = -1 / (2 * sigma * sigma);
//生成高斯矩阵
for (i = 0, x = -radius; x <= radius; x++, i++) {
g = a * Math.exp(b * x * x);
gaussMatrix[i] = g;
gaussSum += g;
}
//归一化, 保证高斯矩阵的值在[0,1]之间
for (i = 0, len = gaussMatrix.length; i < len; i++) {
gaussMatrix[i] /= gaussSum;
}
//x方向
for (y = 0; y <canvasa.height; y++) {
for (x = 0; x < canvasa.width; x++) {
r = g = b = a = 0;
gaussSum = 0;
for (j = -radius; j <= radius; j++) {
k = x + j; a=j;
if (k >= 0 && k < canvasa.width) { //确保 k 没超出 x 的范围
i = (y * canvasa.width + k) * 4;
r += pixelData[i] * gaussMatrix[j + radius];
g += pixelData[i + 1] * gaussMatrix[j + radius];
b += pixelData[i + 2] * gaussMatrix[j + radius];
gaussSum += gaussMatrix[j + radius];
}
}
i = (y * canvasa.width + x) * 4;
pixelData[i] = r / gaussSum;
pixelData[i + 1] = g / gaussSum;
pixelData[i + 2] = b / gaussSum;
}
}
//y方向
for (x = 0; x < canvasa.width; x++) {
for (y = 0; y < canvasa.height; y++) {
r = g = b = a = 0;
gaussSum = 0;
for (j = -radius; j <= radius; j++) {
k = y + j;
if (k >= 0 && k <canvasa.height) { //确保 k 没超出 y 的范围
i = (k *canvasa.width + x) * 4;
r += pixelData[i] * gaussMatrix[j + radius];
g += pixelData[i + 1] * gaussMatrix[j + radius];
b += pixelData[i + 2] * gaussMatrix[j + radius];
gaussSum += gaussMatrix[j + radius];
}
}
i = (y * canvasa.width + x) * 4;
pixelData[i] = r / gaussSum;
pixelData[i + 1] = g / gaussSum;
pixelData[i + 2] = b / gaussSum;
}
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
function blackAndWhite3() {
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
for (var
a = 0; a < t.width; a++) for (var e = 0; e < t.height; e++) {
var o = 4 * e * t.width + 4 * a,
i = t.data[o],
r = t.data[o + 1],
h = t.data[o + 2],
n = (i + r + h) / 3;
t.data[o] = n;
t.data[o + 1] = n;
t.data[o + 2] = n;
}
contextb.putImageData(t,0,0,0,0,canvasb.width,canvasb.height);
}
function blackAndWhite2() {
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for (var
a = 0; a < canvasa.width; a++) for (var e = 0; e < canvasa.height; e++) {
var o = 4 * e * canvasa.width + 4 * a,
i = pixelData[o],
r = pixelData[o + 1],
h = pixelData[o + 2],
n = .3 * i + .59 * r + .11 * h;
pixelData[o] = n,
pixelData[o + 1] = n,
pixelData[o + 2] = n
}
contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height);
}
function sepia() {
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
for (var
a = 0; a < t.width; a++) for (var e = 0; e < t.height; e++) {
var o = 4 * e * t.width + 4 * a,
i = t.data[o],
r = t.data[o + 1],
h = t.data[o + 2];
t.data[o] = .393 * i + .769 * r + .189 * h,
t.data[o + 1] = .349 * i + .686 * r + .168 * h,
t.data[o + 2] = .272 * i + .534 * r + .131 * h
}
contextb.putImageData(t,0,0,0,0,canvasb.width,canvasb.height);
}
function negative() {
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
for (var
a = 0; a < t.width; a++) for (var e = 0; e < t.height; e++) {
var o = 4 * e * t.width + 4 * a,
i = t.data[o],
r = t.data[o + 1],
h = t.data[o + 2];
i = 255 - i;
r = 255 - r;
h = 255 - h;
t.data[o] = i;
t.data[o + 1] = r;
t.data[o + 2] = h;
}
contextb.putImageData(t,0,0,0,0,canvasb.width,canvasb.height);
}
function random( t, a) {
return Math.floor(Math.random() * (a - t + 1)) + t
}
function noise(obj) {
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
for (var
a = 0; a < t.width; a++) for (var e = 0; e < t.height; e++) {
var o = 4 * e * t.width + 4 * a,
i = (4 * a * t.width + 4 * e, random(100, 200)),
r = random(100, 200),
h = random(100, 200),
n = (t.data[o] + i) / 2,
d = (t.data[o + 1] + r) / 2,
s = (t.data[o + 2] + h) / 2;
t.data[o] = n;
t.data[o + 1] = d;
t.data[o + 2] = s;
}
contextb.putImageData(t,0,0,0,0,canvasb.width,canvasb.height);
}
function outline() {
var input = contexta.getImageData(0,0,canvasa.width,canvasa.height);
//生成盛放数据的空ImageData对象
var output = contexta.createImageData(canvasa.width, canvasa.height);
// 定义变量
// （这里使用了 input.width 与 input.height
// 使用了canvas.width 与 canvas.height时，
// 在高解像度的显示屏上的显示是不同的
var w = input.width, h = input.height;
var inputData = input.data;
var outputData = output.data;
// 检测边缘
for (var y = 1; y < h-1; y += 1) {
for (var x = 1; x < w-1; x += 1) {
for (var c = 0; c < 3; c += 1) {
var i = (y*w + x)*4 + c;
outputData[i] = 127 + -inputData[i - w*4 - 4] - inputData[i - w*4] - inputData[i - w*4 + 4] +
-inputData[i - 4] + 8*inputData[i] - inputData[i + 4] +
-inputData[i + w*4 - 4] - inputData[i + w*4] - inputData[i + w*4 + 4];
}
outputData[(y*w + x)*4 + 3] = 255; // alpha
}
}
//描画图像
contextb.putImageData(output, 0, 0);
}
function outlineStrong(obj) {
var imageData = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var pixelData = imageData.data;
for (var
a = 0; a < canvasa.width; a++) for (var e = 0; e < canvasa.height; e++) {
var o = 4 * e * canvasa.width + 4 * a,
i = pixelData[o],
r = pixelData[o + 1],
h = pixelData[o + 2],
n = .3 * i + .59 * r + .11 * h;
pixelData[o] = n,
pixelData[o + 1] = n,
pixelData[o + 2] = n
}
// 获取图像数据
var input = imageData;
//生成盛放数据的空ImageData对象
var output = contexta.createImageData(canvasa.width, canvasa.height);
// 定义变量
// （这里使用了 input.width 与 input.height
// 使用了canvas.width 与 canvas.height时，
// 在高解像度的显示屏上的显示是不同的
var w = input.width, h = input.height;
var inputData = input.data;
var outputData = output.data;
// 检测边缘
for (var y = 1; y < h-1; y += 1) {
for (var x = 1; x < w-1; x += 1) {
for (var c = 0; c < 3; c += 1) {
var i = (y*w + x)*4 + c;
outputData[i] = 127 + -inputData[i - w*4 - 4] - inputData[i - w*4] - inputData[i - w*4 + 4] +
-inputData[i - 4] + 8*inputData[i] - inputData[i + 4] +
-inputData[i + w*4 - 4] - inputData[i + w*4] - inputData[i + w*4 + 4];
}
outputData[(y*w + x)*4 + 3] = 255; // alpha
}
}
//描画图像
contextb.putImageData(output,0,0);
}
function contrast(t,obj) {
if(obj){
var e= obj;
}else{
var e = contexta.getImageData(0,0,canvasa.width,canvasa.height);
}
var a = (255 + t) / 255;
a *= a;
for (var
o = 0; o < e.width; o++) for (var i = 0; i < e.height; i++) {
var r = 4 * i * e.width + 4 * o,
h = e.data[r],
n = e.data[r + 1],
d = e.data[r + 2],
s = h / 255,
g = n / 255,
c = d / 255;
s = 255 * ((s - .5) * a + .5);
g = 255 * ((g - .5) * a + .5);
c = 255 * ((c - .5) * a + .5);
s > 255 && (s = 255);
0 > s && (s = 0),
g > 255 && (g = 255),
0 > g && (g = 0),
c > 255 && (c = 255),
0 > c && (c = 0),
e.data[r] = s;
e.data[r + 1] = g;
e.data[r + 2] = c;
}
contextb.putImageData(e ,0,0,0,0,canvasb.width,canvasb.height);
}
function contrastaddan(t) {
var e = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var a = (255 + t) / 255;
a *= a;
for (var
o = 0; o < e.width; o++) for (var i = 0; i < e.height; i++) {
var r = 4 * i * e.width + 4 * o,
h = e.data[r],
n = e.data[r + 1],
d = e.data[r + 2],
s = h / 255,
g = n / 255,
c = d / 255;
s = 255 * ((s - .5) * a + .5);
g = 255 * ((g - .5) * a + .5);
c = 255 * ((c - .5) * a + .5);
s > 255 && (s = 255);
0 > s && (s = 0),
g > 255 && (g = 255),
0 > g && (g = 0),
c > 255 && (c = 255),
0 > c && (c = 0),
e.data[r] = s;
e.data[r + 1] = g;
e.data[r + 2] = c;
}
brightness(-60,e);
}
function map(t, a, e, o, i) {
return (i - o) * (t - a) / (e - a) + o
}
function brightness(t,obj) {
if(obj){
var a= obj;
}else{
var a = contexta.getImageData(0,0,canvasa.width,canvasa.height);
}
t = map(t, -100, 100, -255, 255);
console.log(t);
for (var e = 0; e < a.width; e++) for (var o = 0; o < a.height; o++) {
var i = 4 * o * a.width + 4 * e,
r = a.data[i],
h = a.data[i + 1],
n = a.data[i + 2];
r += t;
h += t;
n += t;
r > 255 && (r = 255),
0 > r && (r = 0),
h > 255 && (h = 255),
0 > h && (h = 0),
n > 255 && (n = 255),
0 > n && (n = 0),
a.data[i] = r,
a.data[i + 1] = h,
a.data[i + 2] = n
}
if(obj){
contrast(50,a);
}else{
contextb.putImageData(a ,0,0,0,0,canvasb.width,canvasb.height);
}
}
function vintage() {
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
for (var
a = 0; a < t.width; a++) for (var e = 0; e < t.height; e++) {
var o = 4 * e * t.width + 4 * a,
i = t.data[o],
r = t.data[o + 1],
h = t.data[o + 2];
i = r,
r = i,
h = 150,
t.data[o] = i,
t.data[o + 1] = r,
t.data[o + 2] = h
}
contrast(50,t);
}
function cartoon() {
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
contrast(400,t);
}
function crayon() {
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
for (var
a = 0; a < t.width; a++) for (var e = 0; e < t.height; e++) {
var o = 4 * e * t.width + 4 * a,
i = (4 * a * t.width + 4 * e, random(100, 200)),
r = random(100, 200),
h = random(100, 200),
n = (t.data[o] + i) / 2,
d = (t.data[o + 1] + r) / 2,
s = (t.data[o + 2] + h) / 2;
t.data[o] = n;
t.data[o + 1] = d;
t.data[o + 2] = s;
var j = t;
var r = 4 * i * j.width + 4 * o,
h = j.data[r],
n = j.data[r + 1],
d = j.data[r + 2],
s = h / 255,
g = n / 255,
c = d / 255;
s = 255 * ((s - .5) * a + .5);
g = 255 * ((g - .5) * a + .5);
c = 255 * ((c - .5) * a + .5);
s > 255 && (s = 255);
0 > s && (s = 0),
g > 255 && (g = 255),
0 > g && (g = 0),
c > 255 && (c = 255),
0 > c && (c = 0),
j.data[r] = s;
j.data[r + 1] = g;
j.data[r + 2] = c;
}
contextb.putImageData(j ,0,0,0,0,canvasb.width,canvasb.height);
}
function crossProcess() {
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
for (var
a = 0; a < t.width; a++) for (var e = 0; e < t.height; e++) {
var o = 4 * e * t.width + 4 * a,
i = t.data[o],
r = t.data[o + 1],
h = t.data[o + 2];
i = r,
r = i,
h = 150,
t.data[o] = i,
t.data[o + 1] = r,
t.data[o + 2] = h
}
brightness(10,t)
}
// 对比度增强，为了效果更好，可以适当调整亮度
function ex10() {
var m = [0, 0, 0, 0, 2, 0, 0, 0, 0];
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var output = ConvolutionMatrix(t, m, 1,-150);
contextb.putImageData(output,0,0);
}
// 锐化
function ex05() {
var m = [0,-1,0,-1,5,-1,0,-1,0];
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var output = ConvolutionMatrix(t, m, 1,0);
contextb.putImageData(output,0,0);
}
// 锐化 无机物剔除
function ex03() {
var m = [0,-1,0,-1,5,-1,0,-1,0];
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var output = ConvolutionMatrix(t, m, 1,0);
wujiOnlyFillter(output);
}
// 锐化 有机物剔除
function ex04() {
var m = [0,-1,0,-1,5,-1,0,-1,0];
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var output = ConvolutionMatrix(t, m, 1,0);
blueOnlyFillter(output);
}
//彩色边缘增强
function ex06() {
var m = [0,-1,0,-1,5,-1,0,-1,0];
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var output = ConvolutionMatrix(t, m, 1,0);
contrast(60,output);
//contextb.putImageData(output,0,0);
}
// 索贝尔横向边缘检测
function ex11() {
var m = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var output = ConvolutionMatrix(t, m, 1,0);
contextb.putImageData(output,0,0);
}
// 横向边缘检测，为了效果更好，可以适当调整亮度
function ex09() {
var m = [0, 0, 0, -1, 1, 0, 0, 0, 0];
var t = contexta.getImageData(0,0,canvasa.width,canvasa.height);
var output = ConvolutionMatrix(t, m, 1,100);
contextb.putImageData(output,0,0);
}
// 卷积矩阵计算
function ConvolutionMatrix(input, m, divisor, offset){
var output = document.createElement("canvas").getContext('2d').createImageData(input);
var w = input.width, h = input.height;
var iD = input.data, oD = output.data;
// 对除了边缘的点之外的内部点的 RGB 进行操作，透明度在最后都设为 255
for (var y = 1; y < h-1; y += 1) {
for (var x = 1; x < w-1; x += 1) {
for (var c = 0; c < 3; c += 1) {
var i = (y*w + x)*4 + c;
// 卷积核计算
oD[i] = offset
+(m[0]*iD[i-w*4-4] + m[1]*iD[i-w*4] + m[2]*iD[i-w*4+4]
+ m[3]*iD[i-4] + m[4]*iD[i] + m[5]*iD[i+4]
+ m[6]*iD[i+w*4-4] + m[7]*iD[i+w*4] + m[8]*iD[i+w*4+4])
/ divisor;
}
oD[(y*w + x)*4 + 3] = 255; // 设置透明度为不透明
}
}
return output;
}
</script>
以上是关于canvas 滤镜大全的主要内容，如果未能解决你的问题，请参考以下文章