Use JavaScript functions to implement image processing and filter effects

Use JavaScript functions to achieve image processing and filter effects

Foreword:
In Web development, image processing and filter effects are very common requirements. With JavaScript, we can implement these functions by writing functions. This article will introduce how to use JavaScript functions to achieve image processing and filter effects, and provide specific code examples.

1. Image processing function:
   In image processing, we often need to adjust the size, crop, rotate and other operations of the image. The following are some common examples of image processing functions:

1.1 Adjust the image size
You can use the resizeImage function to resize the image. This function accepts three parameters: source image object, target width and target height.

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 Crop pictures
Use the cropImage function to crop pictures. This function accepts four parameters: the source image object, the x-coordinate of the cropping starting point, the y-coordinate of the cropping starting point, and the cropping size.

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 Rotate the image
You can rotate the image through the rotateImage function. This function accepts two parameters: the source image object and the angle of rotation.

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. Filter effects:
   In addition to common image processing functions, we can also use JavaScript functions to achieve some filter effects, such as black and white, blur, etc. The following are some function examples of commonly used filter effects:

2.1 Black and white filter
Use the blackAndWhite function to convert the image into a black and white effect. This function accepts one parameter: the source image object.

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 filter
Use the blur function to blur the image. This function accepts one parameter: the source image object.

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";

Conclusion:
Using JavaScript functions can easily achieve image processing and filter effects. Different needs can be met by adjusting picture size, cropping pictures, rotating pictures and other functions. By applying filter effects, you can add an artistic and personal touch to your pictures. The above are some common examples of image processing and filter effect functions. I hope they will be helpful to you.

The above is the detailed content of Use JavaScript functions to implement image processing and filter effects. For more information, please follow other related articles on the PHP Chinese website!