JavaScript 関数を使用して画像処理とフィルター効果を実装する

JavaScript 関数を使用して画像処理とフィルター効果を実現する

前書き:
Web 開発では、画像処理とフィルター効果は非常に一般的な要件です。 JavaScript では、関数を記述することでこれらの機能を実装できます。この記事では、JavaScript 関数を使用して画像処理とフィルター効果を実現する方法と、具体的なコード例を紹介します。

1. 画像処理機能:
   画像処理では、画像のサイズ調整、切り抜き、回転などの操作が必要になることがよくあります。以下に、画像処理関数の一般的な例をいくつか示します。

1.1 画像サイズの調整
resizeImage 関数を使用して画像のサイズを変更できます。この関数は、ソース画像オブジェクト、ターゲット幅、ターゲット高さの 3 つのパラメータを受け入れます。

function resizeImage(img, width, height) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);
  return canvas.toDataURL();
}

// 使用示例：
var img = new Image();
img.onload = function() {
  var resized = resizeImage(img, 200, 200);
  document.getElementById("result").src = resized;
};
img.src = "image.jpg";

1.2 画像をトリミングする
#cropImage 関数を使用して画像をトリミングします。この関数は、ソース画像オブジェクト、トリミング開始点の x 座標、トリミング開始点の y 座標、およびトリミング サイズの 4 つのパラメーターを受け入れます。

function cropImage(img, x, y, width, height) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
  return canvas.toDataURL();
}

// 使用示例：
var img = new Image();
img.onload = function() {
  var cropped = cropImage(img, 100, 100, 200, 200);
  document.getElementById("result").src = cropped;
};
img.src = "image.jpg";

1.3 画像を回転する

rotateImage 関数を使用して画像を回転できます。この関数は、ソース画像オブジェクトと回転角度の 2 つのパラメータを受け入れます。

function rotateImage(img, angle) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var width = img.width;
  var height = img.height;
  canvas.width = height;
  canvas.height = width;
  ctx.translate(height / 2, width / 2);
  ctx.rotate(angle * Math.PI / 180);
  ctx.drawImage(img, -width / 2, -height / 2);
  return canvas.toDataURL();
}

// 使用示例：
var img = new Image();
img.onload = function() {
  var rotated = rotateImage(img, 90);
  document.getElementById("result").src = rotated;
};
img.src = "image.jpg";

フィルター効果:
2. 一般的な画像処理関数に加えて、JavaScript 関数を使用して白黒、ぼかしなどのフィルター効果を実現することもできます。一般的に使用されるフィルター効果の関数の例を以下に示します。
   

2.1 白黒フィルター

blackAndWhite 関数を使用して、画像を白黒効果に変換します。この関数は、ソース画像オブジェクトという 1 つのパラメータを受け入れます。

function blackAndWhite(img) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var width = img.width;
  var height = img.height;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0);
  var imageData = ctx.getImageData(0, 0, width, height);
  var data = imageData.data;
  for (var i = 0; i < data.length; i += 4) {
    var gray =
      data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
    data[i] = data[i + 1] = data[i + 2] = gray;
  }
  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL();
}

// 使用示例：
var img = new Image();
img.onload = function() {
  var blackWhite = blackAndWhite(img);
  document.getElementById("result").src = blackWhite;
};
img.src = "image.jpg";

2.2 ぼかしフィルター

blur 関数を使用して画像をぼかします。この関数は、ソース画像オブジェクトという 1 つのパラメータを受け入れます。

function blur(img) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var width = img.width;
  var height = img.height;
  canvas.width = width;
  canvas.height = height;
  ctx.filter = "blur(5px)";
  ctx.drawImage(img, 0, 0);
  return canvas.toDataURL();
}

// 使用示例：
var img = new Image();
img.onload = function() {
  var blurred = blur(img);
  document.getElementById("result").src = blurred;
};
img.src = "image.jpg";

結論:

JavaScript 関数を使用すると、画像処理やフィルター効果を簡単に実現できます。画像サイズの調整、画像のトリミング、画像の回転などの機能により、さまざまなニーズに対応できます。フィルター効果を適用すると、写真に芸術的で個性的なタッチを加えることができます。上記は一般的な画像加工やフィルター効果の機能の一例ですので、ご参考になれば幸いです。

以上がJavaScript 関数を使用して画像処理とフィルター効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。