ホーム > カテゴリ > HTML5・JavaScript >

ブラウザで画像編集をする「effect.js」の使い方[公式]

「effect.js」はJavaScriptで約30種類の画像処理を手軽に実行できる無料のライブラリです。画像の明るさ調整や、回転/反転、ぼかし、シャープ、モザイクなどのエフェクト処理を関数を呼び出すだけで実行できます。

ブラウザがChromeの場合は、Chromeのセキュリティ仕様でローカルで実行するとエラーが発生します。回避策はサーバーにHTMLファイルをアップするか、エラー回避方法をご覧ください。

機能

元画像
グレースケール
セピアカラー
ネガポジ
Xor
回転
反転
明るさ調整
コントラスト調整
ガンマ調整
RGB調整
RGB交換
二階調化
ノイズ
拡散
モザイク
手ぶれ
鉛筆画調
エンボス
ソラリゼーション
ポスタリゼーション
その他・ぼかし(平均化/弱/強)
・シャープ(弱/強)
・濃度抽出
・ノーマライズ
・イコライズ
・トーンカーブ
・カスタムフィルタ
など

ダウンロード

effect.js
ダウンロードの方法がわからない方はこちらからです。

DEMO

次のサイトで画像処理をテストできます。
https://www.petitmonte.com/labo/tokikaze/

使い方

基本パターン1 (source)

<script src="effect.js"></script>
<button onclick="run();" style="font-size:32px;">run</button>
<p></p>
<img id="SrcImage" src="test.png">
<canvas id="DstCanvas"></canvas>
<script>
  var src_img = document.getElementById("SrcImage");
  var dst_canvas = document.getElementById("DstCanvas");
  var dst_ctx = dst_canvas.getContext("2d");    
  
  function run(){
    
    // 元画像の描画
    dst_canvas.width  = src_img.width;
    dst_canvas.height = src_img.height;        
    dst_ctx.drawImage(src_img,0,0); 
    
    // ImageDataの生成
    var source = dst_ctx.getImageData(0,0,dst_canvas.width,dst_canvas.height); 
    
    // エフェクトの実行    
    EffectGrayscale(source);
    
    // canvasへ描画
    dst_ctx.putImageData(source,0,0);
  }  
</script>

基本パターン2 (source,destination)

<script src="effect.js"></script>
<button onclick="run();" style="font-size:32px;">run</button>
<p></p>
<img id="SrcImage" src="test.png">
<canvas id="DstCanvas"></canvas>
<script>
  var src_img = document.getElementById("SrcImage");
  var dst_canvas = document.getElementById("DstCanvas");
  var dst_ctx = dst_canvas.getContext("2d");    
  
  function run(){    
  
    // 元画像の描画
    dst_canvas.width  = src_img.width;
    dst_canvas.height = src_img.height;        
    dst_ctx.drawImage(src_img,0,0); 
    
    // ImageDataの生成
    var source = dst_ctx.getImageData(0,0,dst_canvas.width,dst_canvas.height); 
    var destination = dst_ctx.createImageData(dst_canvas.width,dst_canvas.height); 
    
    // エフェクトの実行
    EffectMosaic(source,destination,5);
    
    // canvasへ描画
    dst_ctx.putImageData(destination,0,0);

  }  
</script>

関数

グレースケール
関数EffectGrayscale(source)
引数source : ImageDataオブジェクト
戻り値source

セピアカラー
関数EffectSepia(source)
引数source : ImageDataオブジェクト
戻り値source

ネガポジ
関数EffectNegaposi(source)
引数source : ImageDataオブジェクト
戻り値source

Xor
関数EffectXor(source)
引数source : ImageDataオブジェクト
戻り値source

画像の回転
関数EffectTrun(source,destination,option)
引数source : ImageDataオブジェクト
destination: ImageDataオブジェクト
option : 1:90度回転(左) 2:90度回転(右) 3:180度回転
戻り値destination
備考90度回転(左/右)は画像の幅/高さが変更されるので、次のようにdestinationの幅/高さを逆にして下さい。※180度回転は逆さにする必要はありません。

function run(){
// 元画像の描画
dst_canvas.width = src_img.width;
dst_canvas.height = src_img.height;
dst_ctx.drawImage(src_img,0,0);

// ImageDataの生成
var source = dst_ctx.getImageData(0,0,dst_canvas.width,dst_canvas.height);

dst_canvas.width = src_img.height; // ココ
dst_canvas.height = src_img.width; // ココ
var destination = dst_ctx.createImageData(dst_canvas.width,dst_canvas.height);

// エフェクトの実行
EffectTrun(source,destination,1);

// canvasへ描画
dst_ctx.putImageData(destination,0,0);
}

画像を左右回転
関数EffectMirror(source,destination)
引数source : ImageDataオブジェクト
destination: ImageDataオブジェクト
戻り値destination

画像を上下反転
関数EffectFlip(source,destination)
引数source : ImageDataオブジェクト
destination: ImageDataオブジェクト
戻り値destination

明るさ調整
関数EffectLight(source,light)
引数source : ImageDataオブジェクト
light : -255 ～ 255(標準:0)
戻り値source

コントラスト調整
関数EffectContrast(source,contrast)
引数source : ImageDataオブジェクト
contrast: -255 ～ 255(標準:0)
戻り値source

ガンマ調整
関数EffectGamma(source,gamma)
引数source : ImageDataオブジェクト
gamma : 0.01 ～ 3.0(標準:1)
戻り値source

RGB調整
関数EffectRGBColor(source,r,g,b)
引数source : ImageDataオブジェクト
r : -255 ～ 255(標準:0)
g : -255 ～ 255(標準:0)
b : -255 ～ 255(標準:0)
戻り値source

RGB交換
関数EffectRGBSwap(source,option)
引数source : ImageDataオブジェクト
option : 1:GRB 2:BGR 3:RBG 4:BRG 5:GBR
戻り値source

ノーマライズ
関数EffectNormalize(source)
引数source : ImageDataオブジェクト
戻り値source

イコライズ
関数EffectEqualize(source)
引数source : ImageDataオブジェクト
戻り値source

トーンカーブ
関数EffectToneCurve(source,LUT)
引数source : ImageDataオブジェクト
LUT : 1次元配列(0 - 255)。 備考欄にある定数参照。独自も可能。
戻り値source
備考 LUT_CONTRAST : コントラスト改善
LUT_BRIGHTNESS : 明るさを強調
LUT_DARKNESS : 暗さを強調
LUT_POSTERIZE : ポスタリゼーション
LUT_SOLARIZATION : 擬似ソラリゼーション

二階調化
関数EffectMono(source,value)
引数source : ImageDataオブジェクト
value : 0 ～ 255(標準:127)
戻り値source

濃度抽出
関数EffectMedian(source,destination,option)
引数source : ImageDataオブジェクト
destination : ImageDataオブジェクト
option : 1:最大濃度 2: 中間濃度(メディアン) 3: 最小濃度
戻り値destination

ノイズ
関数EffectNoise(source,,value)
引数source : ImageDataオブジェクト
value : 0 ～ 255(標準:30)
戻り値source

拡散
関数EffectDiffusion(source,destination,value)
引数source : ImageDataオブジェクト
destination : ImageDataオブジェクト
value : 0 ～ 30(標準:7)
戻り値destination

モザイク
関数EffectMosaic(source,destination,value)
引数source : ImageDataオブジェクト
destination : ImageDataオブジェクト
value : 1 ～ 50(標準:5)
戻り値destination

手ぶれ
関数EffectHandShake(source,destination,option,value)
引数source : ImageDataオブジェクト
destination : ImageDataオブジェクト
option : 1:右上 2:上 3:左上 4:右 6左 7:右下 8:下 9:左下
value : 1 ～ 50(標準:18)
戻り値destination

鉛筆画調
関数EffectPen(source,destination,power,bold)
引数source : ImageDataオブジェクト
destination : ImageDataオブジェクト
power : 2,4,8,16,256(標準)
bold : 1:細い 2:中間(標準) 3:太い
戻り値destination

カスタムフィルタ 3x3
関数EffectCustom3x3(source,destination,matrix,divisor,addition)
引数source : ImageDataオブジェクト
destination : ImageDataオブジェクト
matrix : マスクビット配列
divisor : 除数 1 ～
addition : 加算 0 ～
戻り値destination
備考 // ぼかし(平均化)
matrix = [1,1,1,1,1,1,1,1,1];
divisor = 9; addition = 0;

※その他のパターンも可能です。

カスタムフィルタ 5x5
関数EffectCustom5x5(source,destination,matrix,divisor,addition)
引数source : ImageDataオブジェクト
destination : ImageDataオブジェクト
matrix : マスクビット配列
divisor : 除数 1 ～
addition : 加算 0 ～
戻り値destination
備考 // ぼかし(平均化)
matrix = [0,0,0,0,0,0,1,1,1,0,0,1,1,1,0,0,1,1,1,0,0,0,0,0,0];
divisor = 9; addition = 0;

// ぼかし(弱)
matrix = [0,0,0,0,0,0,1,2,1,0,0,2,4,2,0,0,1,2,1,0,0,0,0,0,0];
divisor = 16; addition = 0;

// ぼかし(強)
matrix = [0,1,2,1,0,1,2,4,2,1,2,4,8,4,2,1,2,4,2,1,0,1,2,1,0];
divisor = 48; addition = 0;

// シャープ(弱)
matrix = [0,0,0,0,0,0,0,-1,0,0,0,-1,16,-1,0,0,0,-1,0,0,0,0,0,0,0];
divisor = 12; addition = 0;

// シャープ(強)
matrix = [0,0,0,0,0,0,-1,-1,-1,0,0,-1,12,-1,0,0,-1,-1,-1,0,0,0,0,0,0];
divisor = 4; addition = 0;

// ぶれ
matrix = [1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1];
divisor = 3;addition = 0;

// 階調の反転
matrix = [ 0,0,0,0,0,0,0,0,0,0,0,0,-1,0,0,0,0,0,0,0,0,0,0,0,0];
divisor = 1; addition = 255;

// エンボス
matrix =[0,0,0,0,0,0,-1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0];
divisor = 1; addition = 128;

※その他のパターンも可能です。

応用

このままエフェクト関数を実行すると、JavaScriptはシングルスレッドですので重いです。そこで、HTML5の新機能であるWeb Workerを使用するとマルチスレッドで並列処理が可能です。

Web Workerの使い方はWeb Workerを使用してプログレスバーをマルチスレッドで動かすをご覧ください。





関連記事


前の記事：indexedDBのデータベースに画像を保存する[HTML5新機能]
次の記事：画像を高品質に拡大縮小する「resampling.js」の使い方[公式]

公開日：2016年12月13日 最終更新日：2019年09月30日
記事NO：02225