私はそれに挑戦し、6 つのシンプルで一般的な HTML5 Canvas 特殊効果フィルターを実装し、それらを純粋な JavaScript 呼び出し可能な API ファイル gloomyfishfilter.js にカプセル化しました。 サポートされている特殊効果フィルターは次のとおりです:
1. 反転カラー
3. ぼかし
4. 彫刻
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); * 0.686) (b * 0.168);

newb = (r * 0.393) (g * 0.769) (b * 0.189); 

 
3 は 5*5 ボリュームに基づきます。コア
4. レリーフと彫刻: 

現在のピクセルの前のピクセルの RGB 値と次のピクセルの RGB 値に 128 を加えた値に基づいて
5. ミラー: オブジェクトをシミュレートします。ミラーには対応する効果が反映されます。
その他の準備
1. Canvas 2d context オブジェクトの取得方法

コードをコピーコードは次のとおりです。 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. Canvas オブジェクトからピクセルデータを取得する方法

コードをコピーします。

コードは次のとおりです。 var Canvas = document.getElementById("target"); varlen = Canvas.width * Canvas.height * 4; = tempContext.getImageData(0, 0, Canvas.width , Canvas.height); var binaryData = CanvasData.data;

4. DOM オブジェクトにマウス クリック イベント バインドを実装する方法🎜>

コードをコピー

コードは次のとおりです:

function bindingButtonEvent(element, type, handler) { if(element.addEventListener){ element.addEventListener(type, handler,false); }else { element.attachEvent('on' type, handler);// IE6,7,8 の場合

}

} 

5. 実装された gfilter API を呼び出してフィルター関数を完了する方法

コードをコピーします

コードは次のとおりです:

gfilter.colorInvertProcess(binaryData, len); // API の呼び出し 6. ブラウザのサポート: IE、FF、および Chrome でのサポートは次のタグによって実現されます。 :

コードをコピー

コードは次のとおりです:

効果デモ:

 アプリケーションソースコード: 
 
CSS部分: 

純粋な JavaScript_javascript スキルを使用して HTML5 Canvas に 6 つの特殊効果フィルターを実装する例

コードをコピー
コードは次のとおりです:

#svgContainer { width :800px; 高さ:600px; 背景色:#EEEEEE; #sourceDiv { float: 左; 境界: 2px 青} #targetDiv { float: right; border: 2px 実線の赤}

 
filter1.html の HTML ソース コード: 

コードをコピー

コードは次のとおりです:

キャンバスフィルターのデモ

HTML キャンバス画像処理 - Gloomy Fish 作

filter1.html中JavaScript源代：

复制代代码如下:

 
var tempContext = null; // グローバル変数 2D コンテキスト 
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("調整ボタン"); 
var BlurButton = document.getElementById("blur-button"); 
var reButton = document.getElementById("救済ボタン"); 
var dkButton = document.getElementById("diaoke-button"); 
var MirrorButton = document.getElementById("ミラーボタン"); 
// マウスクリックイベントをバインド
bindButtonEvent(inButton, "click", invertColor); 
bindButtonEvent(adButton, "クリック",AdjustColor); 
bindButtonEvent(blurButton, "クリック", BlurImage); 
bindButtonEvent(reButton, "クリック", fudiaoImage); 
bindButtonEvent(dkButton, "クリック", kediaoImage); 
bindButtonEvent(mirrorButton, "クリック", MirrorImage); 
} 

function bindingButtonEvent(element, type, handler) 
{ 
if(element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else { 
element.attachEvent('on' type, handler); // IE6,7,8 の場合 
} 
} 

function invertColor() { 
var Canvas = document.getElementById("target"); 
var len = キャンバスの幅 * キャンバスの高さ * 4; 
var CanvasData = tempContext.getImageData(0, 0, Canvas.width, Canvas.height); 
var binaryData = CanvasData.data; 

// すべてのピクセルを処理します 
gfilter.colorInvertProcess(binaryData, len); 
// キャンバス データをキャンバスにコピーして戻します 
tempContext.putImageData(canvasData, 0, 0); 
} 

functionAdjustColor() {
var Canvas = document.getElementById("target"); 
var len = キャンバスの幅 * キャンバスの高さ * 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 = キャンバスの幅 * キャンバスの高さ * 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 = キャンバスの幅 * キャンバスの高さ * 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 = キャンバスの幅 * キャンバスの高さ * 4; 
var CanvasData = tempContext.getImageData(0, 0, Canvas.width, Canvas.height); 

// すべてのピクセルを処理します 
gfilter.mirrorProcess(tempContext, CanvasData); 
// キャンバス データをキャンバスにコピーして戻します 
tempContext.putImageData(canvasData, 0, 0); 
} 

滤镜源代码(gloomyfishfilter.js)：

复制代代以下のように:

 
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 var r = binaryData[i]; 
var g = binaryData[i 1]; 
var b = binaryData[i 2]; 

binaryData[i] = 255-r; 
binaryData[i 1] = 255-g; 
binaryData[i 2] = 255-b; 
} 
}, 

/**
* カラー値を調整して、より暗く灰色にします... 
* 
* @param binaryData 
* @param l 
*/ 
colorAdjustProcess: function(binaryData, l) { 
for (var i = 0; i < l; i = 4) {
var r = binaryData[i]; 
var g = binaryData[i 1]; 
var b = binaryData[i 2]; 
binaryData[i] = (r * 0.272) (g * 0.534) (b * 0.131); 
binaryData[i 1] = (r * 0.349) (g * 0.686) (b * 0.168); 
binaryData[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); 
dst を返します。 
}, 

/**
* コンボリューション - ケネラル サイズ 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; subColvar colOff = subCol x; 
if(colOff = tempCanvasData.width) { 
colOff = 0; 
} 
for(var subRow=-2; subRowvar rowOff = subRow y; 
if(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; 
sumblue = b; 
} 
} 
// 新しい RGB 値を計算します 
var nr = (sumred / 25.0); 
var ng = (sumgreen / 25.0); 
var nb = (sumblue / 25.0); 
// 次のピクセルポイントの前をクリアします 
sumred = 0.0; 
サムグリーン = 0.0; 
サムブルー = 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 { 
for ( var y = 1; y { 
// 配列内のピクセルのインデックス 
var idx = (x y * tempCanvasData.width) * 4; 
var bidx = ((x-1) y * tempCanvasData.width) * 4; 
var aidx = ((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 { 
for ( var y = 1; y { 
// 配列内のピクセルのインデックス 
var idx = (x y * tempCanvasData.width) * 4; 
var bidx = ((x-1) y * tempCanvasData.width) * 4; 
var aidx = ((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; 
varmidx = (((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; // アルファチャンネル 
} 
} 
}, 
}; 

純粋な JavaScript_javascript スキルを使用して HTML5 Canvas に 6 つの特殊効果フィルターを実装する例

HTML キャンバス画像処理 - Gloomy Fish 作