Gunakan fungsi JavaScript untuk melaksanakan pemprosesan imej dan kesan penapis-tutorial js-php.cn

Gunakan fungsi JavaScript untuk melaksanakan pemprosesan imej dan kesan penapis

王林

Lepaskan： 2023-11-04 08:39:35

asal

1048 orang telah melayarinya

Gunakan fungsi JavaScript untuk melaksanakan pemprosesan imej dan kesan penapis

Gunakan fungsi JavaScript untuk mencapai pemprosesan imej dan kesan penapis

Kata Pengantar:
Dalam pembangunan Web, pemprosesan imej dan penapis Kesan adalah satu keperluan yang sangat biasa. Dengan JavaScript, kita boleh melaksanakan fungsi ini dengan menulis fungsi. Artikel ini akan memperkenalkan cara menggunakan fungsi JavaScript untuk mencapai pemprosesan imej dan kesan penapis, serta memberikan contoh kod khusus.

Fungsi pemprosesan imej:
Dalam pemprosesan imej, kita selalunya perlu melaraskan saiz, pangkas, putaran dan operasi imej yang lain. Berikut ialah beberapa contoh biasa fungsi pemprosesan imej:

1.1 Laraskan saiz imej
Anda boleh menggunakan fungsi resizeImage untuk mengubah saiz imej. Fungsi ini menerima tiga parameter: objek imej sumber, lebar sasaran dan ketinggian sasaran. resizeImage函数来调整图片的大小。该函数接受三个参数：源图片对象、目标宽度和目标高度。

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

Salin selepas log masuk

1.2 裁剪图片
使用cropImage函数可以裁剪图片。该函数接受四个参数：源图片对象、裁剪起始点的x坐标、裁剪起始点的y坐标和裁剪的尺寸。

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

Salin selepas log masuk

1.3 旋转图片
可以通过rotateImage函数来旋转图片。该函数接受两个参数：源图片对象和旋转的角度。

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

Salin selepas log masuk

滤镜效果：
除了常见的图片处理功能以外，我们还可以使用JavaScript函数来实现一些滤镜效果，如黑白、模糊等。下面是一些常用滤镜效果的函数示例：

2.1 黑白滤镜
使用blackAndWhite函数可以将图片转换成黑白效果。该函数接受一个参数：源图片对象。

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

Salin selepas log masuk

2.2 模糊滤镜
使用blur

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

Salin selepas log masuk

1.2 Pangkas gambar

Gunakan fungsi cropImage untuk memangkas gambar. Fungsi ini menerima empat parameter: objek imej sumber, koordinat x bagi titik permulaan pemangkasan, koordinat y bagi titik permulaan pemangkasan dan saiz pemangkasan.
rrreee

1.3 Putar gambar #🎜🎜#Anda boleh memutar gambar melalui fungsi rotateImage. Fungsi ini menerima dua parameter: objek imej sumber dan sudut putaran. #🎜🎜#rrreee

blackandWhite

kabur untuk mengaburkan imej. Fungsi ini menerima satu parameter: objek imej sumber. #🎜🎜#rrreee#🎜🎜#Kesimpulan: #🎜🎜#Menggunakan fungsi JavaScript boleh mencapai pemprosesan imej dan kesan penapis dengan mudah. Keperluan yang berbeza boleh dipenuhi dengan melaraskan saiz gambar, memotong gambar, gambar berputar dan fungsi lain. Dengan menggunakan kesan penapis, anda boleh menambah sentuhan artistik dan peribadi pada gambar anda. Di atas ialah beberapa contoh biasa pemprosesan imej dan fungsi kesan penapis saya harap ia akan membantu anda. #🎜🎜#

Atas ialah kandungan terperinci Gunakan fungsi JavaScript untuk melaksanakan pemprosesan imej dan kesan penapis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!