1. 製品
  2.   画像
  3.   JavaScript
  4.   LensJs
 
  

画像処理用のオープンソース JavaScript ライブラリ

ガウス、グレースケール、ハイパス、反転、ラプラシアン、ミラー、RGB、ロバーツ、彩度など、さまざまな種類のフィルターを使用して画像にさまざまな効果を適用するための JavaScript API。

Lena.js は、ソフトウェア開発者が JavaScript アプリケーション内からさまざまな種類の画像を操作できるようにする、非常にシンプルで軽量な画像処理ライブラリです。これは純粋な JavaScript ライブラリであり、外部依存関係がなくても Node 上でもブラウザー内でも動作します。ライブラリはオープン ソースであり、MIT ライセンスの下で利用できます。このライブラリは、ブラウザー内の重い画像にはあまり適していませんが、小さな画像の操作には非常に効率的です。

Lena.js は非常に使いやすく、さまざまな効果を画像に適用できます。画像フィルターを使用すると、ソフトウェア アプリはワンクリックで画像にさまざまな効果を適用できます。ライブラリには、いくつかの重要な画像フィルターのサポートが含まれています。重要なものには、ガウス、グレースケール、ハイパス、反転、ラプラシアン、ミラー、ノイズ、プレウィット、RGB、ロバーツ、彩度、セピア、シャープなどがあります。このライブラリは、画像への複数のフィルターの適用もサポートしています。フィルターは同じグローバル変数 LenaJS に格納され、キーまたはドット表記を使用してその ID からアクセスできます。

Previous Next

LenaJs の使用を開始する

NPM 経由で LenaJs をインストールするための推奨される方法。以下のコマンドでインストールしてください。

NPM 経由で Lena.Js をインストールする

 npm install lena.js --save

JavaScript を介して画像にフィルターを適用する

オープン ソースの Lena.js ライブラリには、JavaScript アプリケーション内の画像にさまざまな種類の効果を適用するために使用できる一連の便利なフィルターが用意されています。まず、画像に正しいアドレスを入力してから、使用可能なフィルターのリストからフィルターを選択してください。 filterImage および redrawCanvas メソッドを使用して、選択した画像に簡単にフィルターを適用できます。フィルターを適用するために画像とキャンバスが使用されます。

JavaScript でノイズフィルタを追加

 
const noise = function (pixels, amount = 0) {
  const level = amount * 255 * 0.1
  let random;
  for (let i = 0; i < pixels.data.length; i += 4) {
    random = (0.5 - Math.random()) * level;
    pixels.data[i] += random;
    pixels.data[i + 1] += random;
    pixels.data[i + 2] += random;
  }
  return pixels
}
export default noise

画像に複数のフィルターを適用する

Lena.js ライブラリを使用すると、ソフトウェア開発者は、独自の JavaScript アプリ内の画像に複数のフィルターを適用できます。通常、filterImage メソッドによって単一のフィルターが画像に適用されます。画像に複数のフィルタを適用するには、filterImage の代わりに redrawCanvas メソッドを使用する必要があります。最初の引数としてフィルターを使用して既にレンダリングされた画像を渡す必要があり、簡単に画像に追加される 2 番目の引数として新しいフィルターを渡す必要があります。

JavaScript API による画像処理

LenaJs ライブラリを使用すると、ソフトウェア プログラマーは JavaScript 内の画像にプログラムでフィルターを追加できます。 LenaJs でフィルターを適用するのは非常に簡単です。API はフィルターを追加する 2 つの方法を提供します。 filterImage() と redrawCanvas()。フィルターを適用するには、メソッドに画像とキャンバスを提供する必要があります。フィルターを取得するには、LenaJs['filername'] メソッドを使用し、filterImage() メソッドを使用して画像に適用します。

コントラストフィルタを画像に適用<

 
const contrast = function (pixels, amount) {
  const level = Math.pow((amount + 100) / 100, 2)
  let data = pixels.data
  let r
  let g
  let b
  for (let i = 0; i < data.length; i += 4) {
    r = data[i]
    g = data[i + 1]
    b = data[i + 2]
    r = r / 255
    r -= 0.5
    r *= level
    r += 0.5
    r *= 255
    g = g / 255
    g -= 0.5
    g *= level
    g += 0.5
    g *= 255
    b = b / 255
    b -= 0.5
    b *= level
    b += 0.5
    b *= 255
    r = r < 0 ? 0 : r > 255 ? 255 : r
    g = g < 0 ? 0 : g > 255 ? 255 : g
    b = b < 0 ? 0 : b > 255 ? 255 : b
    data[i] = r
    data[i + 1] = g
    data[i + 2] = b
  }
  return pixels
}
export default contrast
 日本