나는 직접 시도해 보고 6개의 간단하고 일반적인 HTML5 Canvas 특수 효과 필터를 구현하고 이를 순수 JavaScript 호출 가능 API 파일 gloomyfishfilter.js에 캡슐화했습니다. 지원되는 특수 효과 필터는 다음과 같습니다.
1. 반전 컬러
3. 블러
조각
6 . 거울

필터 원리 설명:
1. 역색상: 픽셀 RGB 값 r, g, b를 얻고 새 RGB 값은 (255-r, 255 -g) , 255-b) 2. 회색 톤: 픽셀 RGB 값 r, g, b를 가져오고 새 RGB 값은

코드 복사 코드는 다음과 같습니다.

newr = (r * 0.272) (g * 0.534) (b * 0.131)

newg = (r * 0.349) (g * 0.686) (b * 0.168); 
newb = (r * 0.393) (g * 0.769) (b * 0.189) 

 
3. 코어

4. 양각 및 조각:
현재 픽셀의 이전 픽셀의 RGB 값과 다음 픽셀의 RGB 값에 128을 더한 값의 차이를 기준으로
5. 거울 해당 효과.
기타 준비
1. Canvas 2d 컨텍스트 객체 획득 방법

코드 복사 코드는 다음과 같습니다.

var canvas = document.getElementById("target");

canvas.width = source.clientWidth; 
canvas.height = source.clientHeight; .getContext) { 
console.log("캔버스는 지원되지 않습니다. HTML5 호환 브라우저를 설치하십시오.") 
return; 
} 
// 캔버스의 2D 컨텍스트를 가져오고 이미지를 그립니다. 
 tempContext = canvas.getContext ("2d") 

 
2. DOM img 개체를 Canvas 개체로 그리는 방법 

코드 복사 코드는 다음과 같습니다. var source = document.getElementById("source")

tempContext.drawImage(source, 0, 0, canvas .width,canvas.height);

3. 캔버스 객체에서 픽셀 데이터를 가져오는 방법

코드 복사 코드는 다음과 같습니다. var canvas = document.getElementById("target");

varlen = canvas.width * canvas.height * 4; = tempContext.getImageData(0, 0, canvas.width , canvas.height);

var BinaryData = canvasData.data; 

DOM 객체에 대한 마우스 클릭 이벤트 바인딩 구현 방법

코드 복사

코드는 다음과 같습니다. functionbindButtonEvent(element, type, handler) {

if(element.addEventListener){

element.addEventListener(type, handler,false) 
}else { 
element.attachEvent('on' 유형, handler);// for IE6,7,8 
} 
} 

 
5. 구현된 gfilter API를 호출하여 필터 기능을 완성하는 방법

코드 복사

코드는 다음과 같습니다. gfilter.colorInvertProcess(binaryData, len); //호출 API

 
6. 브라우저 지원: IE, FF 및 Chrome 지원은 다음 태그를 통해 달성됩니다. : 

코드 복사

코드는 다음과 같습니다.

효과 시연 :

애플리케이션 소스 코드 :
순수 JavaScript_javascript 기술을 사용하여 HTML5 Canvas에서 6가지 특수 효과 필터를 구현한 예

CSS 부분:

코드 복사

코드는 다음과 같습니다. #svgContainer { width :800px;

높이:600px;

배경색:#EEEEEE; 
} 
# sourceDiv { float: 왼쪽; 테두리: 2px 단색 파란색} 
#targetDiv { float: 오른쪽; 테두리: 2px 단색 빨간색} 

 
filter1.html의 HTML 소스 코드: 

코드 복사

코드는 다음과 같습니다.

<머리>

캔버스 필터 데모

<본문>

HTML 캔버스 이미지 프로세스 - 작성자: Gloomy Fish

filter1.html中JavaScript源代码:

复代码代码如下:

 
var tempContext = null; // 전역 변수 2d context 
window.onload = function() { 
var source = document.getElementById("source"); 
var canvas = document.getElementById("target"); 
canvas.width = source.clientWidth; 
canvas.height = source.clientHeight; 

if (!canvas.getContext) { 
console.log("캔버스는 지원되지 않습니다. HTML5 호환 브라우저를 설치하세요."); 
반환; 
} 

// 캔버스의 2D 컨텍스트를 가져와 이미지를 그립니다. 
tempContext = canvas.getContext("2d"); 
tempContext.drawImage(source, 0, 0, canvas.width, canvas.height); 

// 초기화 작업 
var inButton = document.getElementById("invert-button"); 
var adButton = document.getElementById("adjust-button"); 
var BlurButton = document.getElementById("blur-button"); 
var reButton = document.getElementById("relief-button"); 
var dkButton = document.getElementById("diaoke-button"); 
var mirrorButton = document.getElementById("mirror-button"); 
// 마우스 클릭 이벤트 바인딩 
bindButtonEvent(inButton, "click", invertColor); 
bindButtonEvent(adButton, "click", adjustColor); 
bindButtonEvent(blurButton, "click", BlurImage); 
bindButtonEvent(reButton, "클릭", fudiaoImage); 
bindButtonEvent(dkButton, "클릭", kediaoImage); 
bindButtonEvent(mirrorButton, "클릭", mirrorImage); 
} 

functionbindButtonEvent(element, type, handler) 
{ 
if(element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else { 
element.attachEvent('on' 유형, 핸들러); // IE6,7,8의 경우 
} 
} 

function invertColor() { 
var canvas = document.getElementById("target"); 
var len = canvas.width * canvas.height * 4; 
var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height); 
var BinaryData = canvasData.data; 

// 모든 픽셀 처리 
gfilter.colorInvertProcess(binaryData, len); 
// 캔버스 데이터를 캔버스에 다시 복사 
tempContext.putImageData(canvasData, 0, 0); 
} 

function adjustColor() { 
var canvas = document.getElementById("target"); 
var len = canvas.width * canvas.height * 4; 
var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height); 
var BinaryData = canvasData.data; 

// 모든 픽셀 처리 
gfilter.colorAdjustProcess(binaryData, len); 
// 캔버스 데이터를 캔버스에 다시 복사 
tempContext.putImageData(canvasData, 0, 0); 
} 

function BlurImage() 
{ 
var canvas = document.getElementById("target"); 
var len = canvas.width * canvas.height * 4; 
var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height); 

// 모든 픽셀 처리 
gfilter.blurProcess(tempContext, canvasData); 
// 캔버스 데이터를 캔버스에 다시 복사 
tempContext.putImageData(canvasData, 0, 0); 
} 

function fudiaoImage() 
{ 
var canvas = document.getElementById("target"); 
var len = canvas.width * canvas.height * 4; 
var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height); 

// 모든 픽셀 처리 
gfilter.reliefProcess(tempContext, canvasData); 
// 캔버스 데이터를 캔버스에 다시 복사 
tempContext.putImageData(canvasData, 0, 0); 
} 

function kediaoImage() 
{ 
var canvas = document.getElementById("target"); 
var len = canvas.width * canvas.height * 4; 
var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height); 

// 모든 픽셀 처리 
gfilter.diaokeProcess(tempContext, canvasData); 
// 캔버스 데이터를 캔버스에 다시 복사 
tempContext.putImageData(canvasData, 0, 0); 
} 

function mirrorImage() 
{ 
var canvas = document.getElementById("target"); 
var len = canvas.width * canvas.height * 4; 
var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height); 

// 모든 픽셀 처리 
gfilter.mirrorProcess(tempContext, canvasData); 
// 캔버스 데이터를 캔버스에 다시 복사 
tempContext.putImageData(canvasData, 0, 0); 
} 

滤镜源代码(gloomyfishfilter.js)：

复system代码代码아래:

 
var gfilter = { 
type: "canvas", 
name: "filters", 
author: "zhigang", 
getInfo: function () { 
return this.author ' ' this.type ' ' this.name; 
}, 
/**
* 픽셀의 색상 값 반전, 새 픽셀 = RGB(255-r, 255-g, 255 - b) 
* 
* @param BinaryData - 캔버스의 imagedata.data 
* @param l - 데이터 길이(가로 * 이미지 데이터의 높이) 
*/ 
colorInvertProcess: function(binaryData, l) { 
for (var i = 0; i < l; i = 4) { 
var r = 바이너리데이터[i]; 
var g = 바이너리데이터[i 1]; 
var b = 바이너리데이터[i 2]; 

binaryData[i] = 255-r; 
바이너리데이터[i 1] = 255-g; 
바이너리데이터[i 2] = 255-b; 
} 
}, 

/**
* 색상 값을 조정하여 더 어둡고 회색으로 만듭니다... 
* 
* @param binaryData 
* @param l 
*/ 
colorAdjustProcess: function(binaryData, l) { 
for (var i = 0; i < l; i = 4) { 
var r = 바이너리데이터[i]; 
var g = 바이너리데이터[i 1]; 
var b = 바이너리데이터[i 2]; 
바이너리데이터[i] = (r * 0.272) (g * 0.534) (b * 0.131); 
바이너리데이터[i 1] = (r * 0.349) (g * 0.686) (b * 0.168); 
바이너리데이터[i 2] = (r * 0.393) (g * 0.769) (b * 0.189); 
} 
}, 

/**
* 캔버스의 딥클론 이미지 데이터 
* 
* @param context 
* @param src 
* @returns 
*/ 
copyImageData: function(context, src) 
{ 
var dst = context.createImageData(src. 너비, 소스.높이); 
dst.data.set(src.data); 
일일 반환; 
}, 

/**
* 컨볼루션 - 케네럴 크기 5*5 - 흐림 효과 필터(흐림 효과) 
* 
* @param context 
* @param canvasData 
*/ 
blurProcess: function(context, canvasData) { 
console.log("캔버스 필터 - 흐림 프로세스"); 
var tempCanvasData = this.copyImageData(context, canvasData); 
var sumred = 0.0, sumgreen = 0.0, sumblue = 0.0; 
for ( var x = 0; x < tempCanvasData.width; x ) { 
for ( var y = 0; y < tempCanvasData.height; y ) { 
// 픽셀 인덱스 배열 
var idx = (x y * tempCanvasData.width) * 4; 
for(var subCol=-2; subCol<=2; subCol ) { 
var colOff = subCol x; 
if(colOff <0 || colOff >= tempCanvasData.width) { 
colOff = 0; 
} 
for(var subRow=-2; subRowvar rowOff = subRow y; 
if(rowOff < 0 || rowOff >= tempCanvasData.height) { 
rowOff = 0; 
} 
var idx2 = (colOff rowOff * tempCanvasData.width) * 4; 
var r = tempCanvasData.data[idx2 0]; 
var g = tempCanvasData.data[idx2 1]; 
var b = tempCanvasData.data[idx2 2]; 
합계 = r; 
섬그린 = g; 
섬블루 = b; 
} 
} 
// 새로운 RGB 값 계산 
var nr = (sumred / 25.0); 
var ng = (sumgreen / 25.0); 
var nb = (sumblue / 25.0); 
// 다음 픽셀 포인트를 위해 이전 지우기 
sumred = 0.0; 
섬그린 = 0.0; 
sumblue = 0.0; 
// 새 픽셀 값 할당 
canvasData.data[idx 0] = nr; // 빨간색 채널 
canvasData.data[idx 1] = ng; // 녹색 채널 
canvasData.data[idx 2] = nb; // 파란색 채널 
canvasData.data[idx 3] = 255; // 알파 채널 
} 
} 
}, 

/**
* 픽셀값 이후 - 픽셀값 128 이전 
* 릴리프 효과 
*/ 
reliefProcess: function(context, canvasData) { 
console.log( "캔버스 필터 - 릴리프 프로세스"); 
var tempCanvasData = this.copyImageData(context, canvasData); 
for ( var x = 1; x < tempCanvasData.width-1; x ) 
{ 
for ( var y = 1; y < tempCanvasData.height-1; y ) 
{ 
// 배열의 픽셀 인덱스 
var idx = (x y * tempCanvasData.width) * 4; 
var bidx = ((x-1) y * tempCanvasData.width) * 4; 
varaidx = ((x 1) y * tempCanvasData.width) * 4; 
// 새 RGB 값 계산 
var nr = tempCanvasData.data[aidx 0] - tempCanvasData.data[bidx 0] 128; 
var ng = tempCanvasData.data[aidx 1] - tempCanvasData.data[bidx 1] 128; 
var nb = tempCanvasData.data[aidx 2] - tempCanvasData.data[bidx 2] 128; 
nr = (nr 255) ? 255: nr); 
ng = (ng  255) ? 255: ng); 
nb = (nb  255) ? 255: nb); 
// 새 픽셀 값 할당 
canvasData.data[idx 0] = nr; // 빨간색 채널 
canvasData.data[idx 1] = ng; // 녹색 채널 
canvasData.data[idx 2] = nb; // 파란색 채널 
canvasData.data[idx 3] = 255; // 알파 채널 
} 
} 
}, 

/**
* 픽셀 값 이전 - 픽셀 값 128 이후 
* 조각 효과 
* 
* @param canvasData 
*/ 
diaokeProcess: function(context, canvasData) { 
console.log("캔버스 필터 - 프로세스"); 
var tempCanvasData = this.copyImageData(context, canvasData); 
for ( var x = 1; x < tempCanvasData.width-1; x ) 
{ 
for ( var y = 1; y < tempCanvasData.height-1; y ) 
{ 
// 배열의 픽셀 인덱스 
var idx = (x y * tempCanvasData.width) * 4; 
var bidx = ((x-1) y * tempCanvasData.width) * 4; 
varaidx = ((x 1) y * tempCanvasData.width) * 4; 
// 새 RGB 값 계산 
var nr = tempCanvasData.data[bidx 0] - tempCanvasData.data[aidx 0] 128; 
var ng = tempCanvasData.data[bidx 1] - tempCanvasData.data[aidx 1] 128; 
var nb = tempCanvasData.data[bidx 2] - tempCanvasData.data[aidx 2] 128; 
nr = (nr 255) ? 255: nr); 
ng = (ng  255) ? 255: ng); 
nb = (nb  255) ? 255: nb); 
// 새 픽셀 값 할당 
canvasData.data[idx 0] = nr; // 빨간색 채널 
canvasData.data[idx 1] = ng; // 녹색 채널 
canvasData.data[idx 2] = nb; // 파란색 채널 
canvasData.data[idx 3] = 255; // 알파 채널 
} 
} 
}, 

/**
* 거울 반사 
* 
* @param context 
* @param canvasData 
*/ 
mirrorProcess : function(context, canvasData) { 
console.log( "캔버스 필터 - 프로세스"); 
var tempCanvasData = this.copyImageData(context, canvasData); 
for ( var x = 0; x < tempCanvasData.width; x ) // 열 
{ 
for ( var y = 0; y < tempCanvasData.height; y ) // 행 
{ 
// 배열의 픽셀 인덱스 
var idx = (x y * tempCanvasData.width) * 4; 
var midx = (((tempCanvasData.width -1) - x) y * tempCanvasData.width) * 4; 
// 새 픽셀 값 할당 
canvasData.data[midx 0] = tempCanvasData.data[idx 0]; // 빨간색 채널 
canvasData.data[midx 1] = tempCanvasData.data[idx 1]; ; // 녹색 채널 
canvasData.data[midx 2] = tempCanvasData.data[idx 2]; ; // 파란색 채널 
canvasData.data[midx 3] = 255; // 알파 채널 
} 
} 
}, 
}; 